Teste manual de acessibilidade

O teste manual de acessibilidade usa teclado, testes visuais e cognitivos, ferramentas e técnicas para encontrar problemas que as ferramentas automatizadas não conseguem. Como as ferramentas automatizadas não abrangem todos os critérios de sucesso identificados no WCAG, é essencial que você não execute testes de acessibilidade automatizados e pare de testar.

À medida que a tecnologia avança, mais testes podem ser cobertos apenas por ferramentas automatizadas, mas hoje as verificações manuais e de tecnologia adaptativa precisam ser adicionadas aos protocolos de teste para cobrir todos os pontos de verificação do WCAG aplicáveis.

Prós dos testes manuais de acessibilidade:

  • Razoavelmente simples e rápida de executar
  • Detectar uma porcentagem maior de problemas do que os testes automatizados sozinhos
  • Poucas ferramentas e experiência necessárias para o sucesso

Contras dos testes manuais de acessibilidade:

  • São mais complexos e demorados do que os testes automatizados.
  • Pode ser difícil de repetir em grande escala
  • Exigem mais experiência em acessibilidade para realizar testes e interpretar os resultados

Vamos comparar quais elementos e detalhes de acessibilidade podem ser detectados por uma ferramenta automatizada e quais não podem ser detectados.

Podem ser automatizados Não pode ser automatizado
Contraste de cores do texto em planos de fundo sólidos Contraste de cores do texto em gradientes/imagens
O texto alternativo da imagem existe O texto alternativo da imagem é preciso e foi atribuído corretamente
Títulos, listas e pontos de referência Títulos, listas e pontos de referência estão marcados corretamente, e todos os elementos são contabilizados.
ARIA está presente ARIA está sendo usada e aplicada aos elementos certos
Como identificar elementos com foco no teclado Quais elementos não têm foco do teclado, a ordem de foco faz sentido e o indicador de foco está visível
Detecção de título do iFrame iFrame, a ordem de foco faz sentido, e o indicador de foco está visível
O elemento de vídeo está presente O elemento de vídeo tem mídia alternativa adequada (como legendas e transcrições)


Tipos de testes manuais

Há muitas ferramentas e técnicas manuais a serem consideradas ao analisar a página da Web ou o app para acessibilidade digital. As três maiores áreas de foco em testes manuais são funcionalidade do teclado, avaliações visualmente focadas e verificações gerais de conteúdo.

Vamos abordar cada um desses tópicos em detalhes neste módulo, mas os testes abaixo não são uma lista completa de todos os testes manuais que você pode ou precisa executar. Recomendamos que você comece com uma lista de verificação de acessibilidade manual de uma fonte confiável e desenvolva sua própria lista de verificação de teste manual focada para suas necessidades específicas de produto digital e equipe.

Verificações do teclado

Estima-se que cerca de 25% de todos os problemas de acessibilidade digital estejam relacionados à falta de suporte a teclado. Como aprendemos no módulo foco do teclado, isso afeta todos os tipos de usuários, incluindo usuários com visão normal que usam apenas o teclado, usuários com baixa visão/cegos que usam leitores de tela e pessoas que usam softwares de reconhecimento de voz que usam tecnologia que depende do conteúdo ser acessível por teclado.

Os testes de teclado respondem a perguntas como:

  • A página da Web ou o recurso exige um mouse para funcionar?
  • A ordem de tabulação é lógica e intuitiva?
  • O indicador de foco do teclado está sempre visível?
  • Você pode ficar preso em um elemento que não deve capturar o foco?
  • Você consegue navegar por trás ou ao redor de um elemento que deveria estar prendendo o foco?
  • Ao fechar um elemento que recebeu o foco, o indicador de foco retornou a um lugar lógico?

Embora o impacto da funcionalidade do teclado seja enorme, o procedimento de teste é bastante simples. Tudo o que você precisa fazer é deixar o mouse de lado ou instalar um pequeno pacote JavaScript e testar seu site usando apenas o teclado. Os comandos a seguir são essenciais para testar o teclado.

Chave Resultado
Tab Move um elemento ativo para outro
Shift + Tab Move um elemento ativo para outro
Setas Percorrer controles relacionados
Barra de espaços Alternar estados e rolar a página para baixo
Shift + barra de espaço Move a página para cima
Enter Aciona controles específicos
Escape Dispensa objetos exibidos dinamicamente

Verificações visuais

As verificações visuais se concentram nos elementos visuais da página e usam ferramentas como ampliação da tela ou zoom do navegador para analisar a acessibilidade do site ou app.

As verificações visuais podem informar:

  • Existem problemas de contraste de cor que uma ferramenta automatizada não conseguiu detectar, como texto em cima de um gradiente ou imagem?
  • Há elementos que parecem títulos, listas e outros elementos estruturais, mas não são codificados como tal?
  • Os links de navegação e as entradas de formulários são consistentes em todo o site ou app?
  • Há flashes, luzes estroboscópicas ou animações que excedam as recomendações?
  • O conteúdo tem espaçamento adequado? Para letras, palavras, linhas e parágrafos?
  • Você consegue ver todo o conteúdo usando uma lupa ou o zoom do navegador?

Verificações de conteúdo

Ao contrário dos testes visuais que se concentram em layouts, movimentos e cores, as verificações de conteúdo se concentram nas palavras na página. Não só analise o texto, mas também o contexto para ter certeza de que ele faz sentido para outras pessoas.

As verificações de conteúdo respondem a perguntas como:

  • Os títulos das páginas, cabeçalhos e rótulos de formulários são claros e descritivos?
  • As alternativas de imagem são concisas, precisas e úteis?
  • A cor é usada sozinha como a única maneira de transmitir significado ou informações?
  • Os links são descritivos ou você usa texto genérico, como “leia mais” ou “clique aqui?”
  • Há alguma mudança no idioma de uma página?
  • Está sendo usada uma linguagem simples e todas as siglas estão escritas na primeira referência?

Algumas verificações de conteúdo podem ser automatizadas parcialmente. Por exemplo, você pode escrever um lintificador JavaScript que verifica "Clique aqui" e sugere que você faça uma mudança. No entanto, essas soluções personalizadas muitas vezes ainda precisam de uma pessoa para alterar a cópia para algo contextual.

Demonstração: teste manual

Até agora, realizamos testes automatizados na nossa página da Web de demonstração e encontramos e corrigimos oito tipos diferentes de problemas. Agora estamos prontos para fazer verificações manuais para descobrir se há mais problemas de acessibilidade.

Etapa 1

Nossa demonstração do CodePen atualizada já tem todas as atualizações de acessibilidade automáticas aplicadas.

Confira no modo de depuração para continuar com os próximos testes. Isso é importante, porque remove o <iframe> ao redor da página da Web de demonstração, o que pode interferir em algumas ferramentas de teste. Saiba mais sobre o modo de depuração do CodePen.

Etapa 2

Inicie seu processo de teste manual deixando o mouse ou trackpad de lado e navegue para cima e para baixo no DOM usando apenas o teclado.

Problema 1: indicador de foco visível

Você vai notar o primeiro problema com o teclado imediatamente, ou melhor, não vai notar, porque o indicador de foco visível foi removido. Ao verificar o CSS na demonstração, você vai encontrar o temido "outline: none" adicionado à base de código.

  :focus {
    outline: none;
  }
Vamos corrigir isso.

Como você aprendeu no Módulo de foco do teclado, é necessário remover essa linha de código para permitir que os navegadores da Web adicionem um foco visível para os usuários. Você pode ir além e criar um indicador de foco com o estilo que atende à estética do seu produto digital.

:focus {
  outline: 3px dotted #008576;
}

Problema 2: ordem de foco

Depois de modificar o indicador de foco e ele ficar visível, use as teclas de tabulação para navegar pela página. Ao fazer isso, você vai notar que o campo de entrada do formulário usado para se inscrever na newsletter não recebe foco. Ele foi removido da ordem de foco natural por um tabindex negativo.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
Vamos corrigir.

Como queremos que as pessoas usem esse campo para se inscrever na nossa newsletter, basta remover o tabindex negativo ou definir como zero para que a entrada volte a ser focada pelo teclado.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>

Etapa 3

Depois que o foco do teclado é verificado, passamos para as verificações visuais e de conteúdo.

Ao passar pelos testes de teclado usando a tecla Tab para cima e para baixo na página de demonstração, você provavelmente notou que o teclado focava em três links visualmente ocultos nos parágrafos sobre as diferentes condições médicas.

Para que nossa página seja acessível, os links precisam se destacar do texto ao redor e incluir uma mudança de estilo sem cor ao passar o mouse e no foco do teclado.

Vamos corrigir isso.

Uma solução rápida é sublinhar os links dentro dos parágrafos para destacá-los. Isso resolveria o problema de acessibilidade, mas pode não ser adequado à estética de design geral que você espera alcançar.

Se optar por não adicionar um sublinhado, será necessário modificar as cores de forma a atender aos requisitos do plano de fundo e do texto.

Ao analisar a demonstração usando uma ferramenta de verificação de contraste de links, você vai notar que a cor do link atende ao requisito de contraste de cores de 4,5:1 entre o texto de tamanho normal e o plano de fundo. No entanto, os links sem sublinhado também precisam atender a um requisito de contraste de cores de 3:1 em relação ao texto ao redor.

Uma opção é mudar a cor do link para combinar com os outros elementos na página. No entanto, se você mudar a cor do link para verde, o corpo do texto também precisará ser modificado para atender aos requisitos gerais de contraste de cores entre os três elementos: links, plano de fundo e texto ao redor.

Captura de tela do WebAIM para o texto do link mostrando que o link para o texto do corpo falhou no nível A do WCAG.
Quando o link e o texto do corpo são iguais, o teste falha.
Captura de tela do WebAIM mostra que todos os testes são aprovados quando a cor do link é verde.
Quando o link e o corpo do texto são diferentes, o teste é aprovado.

Problema 4: contraste de cor do ícone

Outro problema de contraste de cores é o dos ícones de mídias sociais. No módulo cor e contraste, você aprendeu que os ícones essenciais precisam atender a um contraste de cores de 3:1 em relação ao plano de fundo. No entanto, na demonstração, os ícones de redes sociais têm uma taxa de contraste de 1,3:1.

Vamos corrigir isso.

Para atender aos requisitos de contraste de cores de 3:1, os ícones de redes sociais foram alterados para um cinza mais escuro.

Captura de tela da demonstração com o analisador de cores mostrando o contraste de cores do ícone com falha.

Problema 5: layout do conteúdo

Se você olhar o layout do conteúdo do parágrafo, o texto está totalmente justificado. Como você aprendeu no módulo Tipografia, isso cria "rios de espaço", o que pode dificultar a leitura do texto para alguns usuários.

p.bullet {
   text-align: justify;
}
Vamos corrigir.

Para redefinir o alinhamento do texto na demonstração, atualize o código para text-align: left; ou remova essa linha do CSS, já que a esquerda é o alinhamento padrão para navegadores. Teste o código para garantir que outros estilos herdados não removam o alinhamento de texto padrão.

p.bullet {
   text-align: left;
}

Etapa 4

Captura de tela do site de demonstração do Medical Mysteries Club.
Todos os problemas manuais foram resolvidos na demonstração, conforme mostrado nesta imagem.

Depois de identificar e corrigir todos os problemas de acessibilidade manuais descritos nas etapas anteriores, sua página ficará parecida com a nossa captura de tela.

É possível que você encontre mais problemas de acessibilidade nas verificações manuais do que abordamos neste módulo. Vamos descobrir muitos deles no próximo módulo.

Próxima etapa

Parabéns! Você concluiu os módulos de teste manual e automatizado. Confira nosso CodePen atualizado, que tem todas as correções de acessibilidade automáticas e manuais aplicadas.

Agora, acesse o último módulo de teste focado em testes de tecnologia adaptativa.

Teste seu conhecimento

Teste seus conhecimentos sobre testes manuais de acessibilidade

Quais elementos precisam atender aos padrões de contraste de cores das WCAG?

Corpo do texto
Todas as alternativas acima
Títulos
Ícones