Noções básicas de testes manuais
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.
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.
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>
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.
Problema 3: contraste de cor do link
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.
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.
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;
}
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
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?