Princípios básicos dos testes manuais
Os testes manuais de acessibilidade usam testes, ferramentas e técnicas de teclado, visuais e cognitivas para encontrar problemas que as ferramentas automatizadas não conseguem. Como as ferramentas automatizadas não abrangem todos os critérios de sucesso identificados nas WCAG, é fundamental executar testes de acessibilidade automatizados e continuar testando.
À medida que a tecnologia avança, mais testes podem ser cobertos apenas por ferramentas automatizadas. No entanto, hoje, as verificações manuais e de tecnologia adaptativa precisam ser adicionadas aos protocolos de teste para cobrir todos os pontos de verificação aplicáveis das WCAG.
Benefícios dos testes manuais de acessibilidade:
- Razoavelmente simples e rápido de executar
- Detectar uma porcentagem maior de problemas do que apenas os testes automatizados
- Poucas ferramentas e experiência necessárias para o sucesso
Desvantagens dos testes manuais de acessibilidade:
- Mais complexos e demorados do que os testes automatizados
- Pode ser difícil de repetir em escala
- Exigem mais conhecimento de acessibilidade para executar testes e interpretar os resultados
Compare os elementos e detalhes de acessibilidade que podem ser detectados por uma ferramenta automatizada com aqueles que não serão detectados.
Tipos de testes manuais
Há muitas ferramentas e técnicas manuais a serem consideradas ao analisar a acessibilidade digital da sua página da Web ou app. As três principais áreas de foco nos testes manuais são funcionalidade do teclado, análises com foco visual e verificações gerais de conteúdo.
Abordamos cada um desses tópicos em um nível alto neste módulo, mas os testes a seguir não são uma lista completa de todos os testes manuais que você pode ou deve executar. Recomendamos que você comece com uma lista de verificação manual de acessibilidade de uma fonte confiável e desenvolva sua própria lista de verificação de testes manuais focada para seu produto digital e necessidades da equipe.
Verificações de teclado
Estima-se que cerca de 25% de todos os problemas de acessibilidade digital estejam relacionados à falta de suporte ao teclado. Como aprendemos no módulo foco do teclado, isso afeta todos os tipos de usuários, incluindo aqueles que usam apenas o teclado, os que têm baixa visão/cegos que usam leitores de tela e as pessoas que usam softwares de reconhecimento de voz com tecnologia que depende de conteúdo 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 no teclado está sempre visível?
- Você consegue ficar preso em um elemento que não deveria reter o foco?
- Você consegue navegar atrás ou ao redor de um elemento que deveria estar prendendo o foco?
- Ao fechar um elemento que recebeu foco, o indicador de foco voltou para um lugar lógico?
Embora o impacto da funcionalidade do teclado seja enorme, o procedimento de teste é bem simples. Basta 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 testes de teclado.
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:
- Há problemas de contraste de cor que uma ferramenta automatizada não consegue detectar, como texto sobre um gradiente ou uma imagem?
- Há elementos que parecem cabeçalhos, listas e outros elementos estruturais, mas não são codificados como tal?
- Os links de navegação e as entradas de formulário são consistentes em todo o site ou app?
- Há algum efeito de luz piscando, estroboscópico ou animação que exceda 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 da página. Não basta analisar o texto em si, é preciso revisar o contexto para garantir que ele faça sentido para outras pessoas.
As verificações de conteúdo respondem a perguntas como:
- Os títulos das páginas, os cabeçalhos e os rótulos dos formulários são claros e descritivos?
- As alternativas de imagem são concisas, precisas e úteis?
- A cor é usada 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 em uma página?
- A linguagem simples é usada, e todas as siglas são escritas por extenso na primeira vez em que são mencionadas?
Algumas verificações de conteúdo podem ser automatizadas, em parte. Por exemplo, você pode escrever um linter JavaScript que verifique "Clique aqui" e sugira uma mudança. No entanto, essas soluções personalizadas geralmente ainda precisam de uma pessoa para mudar o texto para algo contextual.
Demonstração: teste manual
Até agora, executamos testes automatizados na nossa página da Web de demonstração e encontramos e corrigimos oito tipos diferentes de problemas. Agora estamos prontos para executar verificações manuais e descobrir ainda mais problemas de acessibilidade.
Etapa 1
Nossa demonstração atualizada do CodePen tem todas as atualizações de acessibilidade automatizadas aplicadas.
Confira no modo de depuração para continuar com os
próximos testes. Isso é importante porque remove o <iframe> que envolve a 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
Comece o processo de teste manual deixando o mouse ou trackpad de lado e navegando para cima e para baixo no DOM usando apenas o teclado.
Problema 1: indicador de foco visível
Você vai notar o primeiro problema de teclado imediatamente ou, melhor dizendo, não vai notar, já que 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 melhorar.
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 estilizado para atender à 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 estiver visível, pressione a tecla Tab 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. Ela foi removida da ordem de foco natural por um tabindex negativo.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
Como queremos que as pessoas usem esse campo para se inscrever na nossa newsletter, basta remover o tabindex negativo ou defini-lo como zero para permitir que a entrada se torne novamente focalizável pelo teclado.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>
Etapa 3
Depois de verificar o foco do teclado, passamos para as verificações visuais e de conteúdo.
Problema 3: contraste de cor do link
Ao passar pelos testes de teclado pressionando a tecla Tab para cima e para baixo na página de demonstração, você provavelmente notou que o teclado se concentrou 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 cursor do mouse e ao usar o foco do teclado.
Vamos resolver isso.
Uma solução rápida é adicionar um sublinhado aos links dentro dos parágrafos para destacá-los. Isso resolveria o problema de acessibilidade, mas talvez não seja adequado à estética geral do design que você quer alcançar.
Se você não adicionar um sublinhado, será necessário modificar as cores de forma a atender aos requisitos do plano de fundo e da cópia.
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, links não sublinhados 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 corresponder aos outros elementos na página. Mas se você mudar a cor do link para verde, o texto do corpo 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.
Problema 4: contraste de cor do ícone
Outro problema de contraste de cores que passou despercebido são os ícones de redes 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 resolver isso.
Para atender aos requisitos de contraste de cores de 3:1, os ícones das redes sociais são mudados para um cinza mais escuro.
Problema 5: layout do conteúdo
Se você observar o layout do conteúdo do parágrafo, o texto estará totalmente justificado. Como você aprendeu no módulo de tipografia, isso cria "rios de espaço", o que pode dificultar a leitura do texto para alguns usuários.
p.bullet {
text-align: justify;
}
Para redefinir o alinhamento do texto na demonstração, atualize o código para
text-align: left; ou remova essa linha completamente do CSS, já que o alinhamento padrão dos navegadores é à esquerda. Teste o código caso outros estilos herdados removam o alinhamento de texto padrão.
p.bullet {
text-align: left;
}
Etapa 4
Depois de identificar e corrigir todos os problemas manuais de acessibilidade descritos nas etapas anteriores, sua página vai ficar parecida com a captura de tela.
É possível que você encontre mais problemas de acessibilidade nas suas verificações manuais do que abordamos neste módulo. Vamos descobrir muitos desses problemas no próximo módulo.
Próxima etapa
Parabéns! Você concluiu os módulos de testes automatizados e manuais. Confira o CodePen atualizado (link em inglês), que tem todas as correções de acessibilidade automatizadas e manuais aplicadas.
Agora, acesse o último módulo de testes focado em testes de tecnologia adaptativa.