Noções básicas de testes manuais
O teste de acessibilidade manual usa testes de teclado, visuais e cognitivos, ferramentas e técnicas para encontrar problemas que as ferramentas automatizadas não conseguem. Como automatizado ferramentas não cobre todos os critérios de sucesso identificados nas WCAG, mas vital que você não execute testes de acessibilidade automatizados e, em seguida, interrompa-os.
Com o avanço da tecnologia, mais testes podem ser cobertos apenas por ferramentas automatizadas, mas hoje, tanto as verificações manuais quanto as de tecnologia adaptativa precisam ser adicionadas aos protocolos de teste para abranger todos os pontos de verificação das WCAG aplicáveis.
Prós dos testes manuais de acessibilidade:
- Razoavelmente simples e rápida de executar
- Identifique uma porcentagem maior de problemas do que os testes automatizados sozinhos
- Poucas ferramentas e conhecimentos necessários 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
- Requer mais experiência em acessibilidade para executar testes e interpretar os resultados
Vamos comparar quais elementos e detalhes de acessibilidade podem ser detectados no momento por uma ferramenta automatizada e as que não serão detectadas.
Tipos de testes manuais
Existem muitas ferramentas e técnicas manuais a serem consideradas ao analisar seus página da Web ou aplicativo de acessibilidade digital. As três maiores áreas de foco testes manuais são a funcionalidade do teclado, revisões visualmente focadas e verificações gerais de conteúdo.
Vamos conferir cada um desses tópicos em detalhes 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 lista de verificação de acessibilidade manual de uma fonte respeitável e desenvolva sua própria lista de verificação de teste manual focada para seu produto digital e as necessidades da equipe.
Verificações do teclado
Estima-se que cerca de 25% de todos os problemas de acessibilidade digital estão relacionados à falta de compatibilidade com teclado. Como aprendemos no módulo de foco no teclado, isso afeta todos os tipos de usuários, incluindo usuários que só usam o teclado com visão, usuários de leitores de tela cegos ou com baixa visão e pessoas que usam software de reconhecimento de voz que usa tecnologia que depende do conteúdo que também pode ser acessado pelo teclado.
Os testes de teclado respondem a perguntas como:
- A página da Web ou o recurso precisa de um mouse para funcionar?
- A ordem de tabulação é lógica e intuitiva?
- O indicador de foco do teclado está sempre visível?
- Você consegue se prender a um elemento que não deve capturar o foco?
- Você consegue navegar atrás ou ao redor de um elemento que precisa capturar 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 é bastante simples. Tudo o que você precisa fazer é deixar o mouse de lado ou instalar um pequeno pacote JavaScript e testar o site usando apenas o teclado. Os comandos a seguir são essenciais para testar o teclado.
Verificações visuais
As verificações visuais focam os elementos visuais da página e utilizam 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 cores que uma ferramenta automatizada não conseguiu detectar, como texto em cima de um gradiente ou imagem?
- Há elementos que parecem cabeçalhos, listas e outros elementos estruturais, mas não são codificados dessa forma?
- Os links de navegação e as entradas de formulários são consistentes em todo o site ou app?
- Há algo piscando, em movimento ou animação que excede 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, movimento e cores, as verificações de conteúdo focam nas palavras na página. Não só analise o texto, como 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 textos genéricos, 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 em parte. Por exemplo, você pode criar um linter de JavaScript que procure "Clique aqui" e sugere que você faça uma alteração. 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, 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 fazer verificações manuais para descobrir ainda mais problemas de acessibilidade.
Etapa 1
Nossa demonstração do CodePen atualizada tem das atualizações automatizadas de acessibilidade aplicadas.
Visualize-o no modo de depuração para continuar com o
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
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ê deve ver o primeiro problema do teclado imediatamente (ou não deve vê-lo), porque o indicador de foco visível foi removido. Ao examinar o CSS na demonstração, você 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 aos 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 concentração
Depois de modificar o indicador de foco e deixá-lo visível, ao longo da página. Ao fazer isso, você deve notar que o campo de entrada do formulário usado para assinar a 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 que a entrada volte a ser focalizável 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.
Problema 3: contraste de cor do link
Conforme você percorreu os testes de teclado pressionando a tecla Tab para cima e para baixo na página de demonstração, provavelmente notou que o teclado está focado em três links visualmente ocultos no e 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 é adicionar um sublinhado aos 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 perceber que a cor do link atende ao requisito de contraste de cores 4.5:1 entre o texto de tamanho normal e o plano de fundo. No entanto, os links não sublinhados também precisam atender a um requisito de contraste de cor de 3:1 em relação ao texto ao redor.
Uma opção é alterar a cor do link para combinar com os outros elementos da 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.
Problema 4: contraste de cor do ícone
Outro problema que não aparece no contraste de cores são os ícones de redes sociais. No módulo de cor e contraste, você aprendeu que os ícones essenciais precisam ter um contraste de cor 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 são alterados para um cinza mais escuro.
Problema 5: layout do conteúdo
Se você observar o layout do conteúdo do parágrafo, o texto está totalmente justificado. Como você aprendeu Módulo de tipografia, isso cria "rios do espaço", o que pode tornar o texto difícil para alguns que os usuários leiam.
p.bullet {
text-align: justify;
}
Para redefinir o alinhamento do texto na demonstração, você pode atualizar o código para
text-align: left; ou remova essa linha inteiramente do CSS, como à esquerda é o
alinhamento padrão para navegadores. Teste o código, caso outros
os estilos herdados removem o alinhamento de texto padrão.
p.bullet {
text-align: left;
}
Etapa 4
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 os mencionados 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 assistiva.
Teste seu conhecimento
Teste seus conhecimentos sobre testes manuais de acessibilidade
Quais elementos precisam atender aos padrões de contraste de cores WCAG?