Teste de teclado e leitor de tela, passo a passo | We.Inc
Um teste manual passo a passo para qualquer site: verificações de teclado, comandos do NVDA e do VoiceOver, um link para pular ao conteúdo, CSS com :focus-visible e um checklist para marcar.
Para testar um site pelo teclado, deixe o mouse de lado e use Tab, Shift+Tab, Enter, Space e as setas para alcançar e operar tudo, observando se há um anel de foco visível e uma ordem lógica. Depois ative um leitor de tela, o NVDA no Windows ou o VoiceOver no Mac, e confira se títulos, links, botões e campos de formulário são anunciados com clareza.
Critérios da WCAG 2.2 cobertos por estes testes
Critério
Nível
O que você verifica
2.1.1 Teclado
Tudo funciona sem mouse
2.1.2 Sem bloqueio do teclado
O foco sempre consegue sair de novo
2.4.1 Ignorar blocos
Uma forma de pular a navegação repetida
2.4.3 Ordem do foco
A ordem do Tab segue o sentido da página
2.4.7 Foco visível
AA
Você sempre enxerga onde está o foco
2.4.11 Foco não obscurecido (mínimo)
AA
Barras fixas não escondem o item em foco
4.1.2 Nome, função, valor
Os controles anunciam o que são e o seu estado
Verificadores automáticos encontram texto alternativo ausente e contraste baixo, mas não conseguem dizer se um menu abre com Enter ou se quem usa leitor de tela entende um formulário. Esta página percorre a revisão manual em ordem, com uma área de prática que mostra exatamente qual elemento está em foco e um checklist que guarda onde você parou.
Abra a página que você quer testar em outra aba. Deixe este checklist ao lado.
Faça primeiro as etapas de teclado, marcando cada item. A contagem de progresso é atualizada conforme você avança.
Use a área de prática aqui para ensaiar: navegue por ela com Tab e o rastreador de foco mostra o nome do elemento em foco.
Depois inicie um leitor de tela com os comandos das tabelas e repita o percurso ouvindo.
Copie o código do link de pular e do estilo de foco para corrigir as falhas mais comuns.
Teste os percursos principais, não todas as páginas: o menu, uma busca, o formulário principal, o checkout ou o agendamento e qualquer caixa de diálogo.
Aplique zoom de 200 por cento no navegador enquanto navega com Tab. Anéis de foco e cabeçalhos fixos costumam se sobrepor em tamanhos maiores.
Se remover o contorno padrão, substitua-o na mesma regra. Nunca deixe outline: none sozinho.
Use elementos button e a de verdade. Uma div clicável é ignorada pelo Tab e anunciada como texto simples.
Ouça um formulário inteiro com o leitor de tela antes de mudar qualquer coisa. Rótulos ausentes ficam óbvios de ouvido.
Perguntas frequentes
Com qual leitor de tela devo testar?
Use, sempre que possível, o que os seus visitantes usam. O NVDA é gratuito para Windows, da NV Access, e o VoiceOver já vem em todo Mac e iPhone. Se a maior parte do seu tráfego vem de celulares, faça também uma rodada com o VoiceOver no iPhone ou o TalkBack no Android.
Como iniciar e encerrar o NVDA e o VoiceOver?
Depois de instalado, o NVDA inicia com Control+Alt+N, e Insert+Q o encerra. No Mac, Command+F5 liga e desliga o VoiceOver. Pressionar Control sozinho cala o NVDA no meio da frase.
O que é um link para pular ao conteúdo?
É o primeiro link da página, normalmente escondido até receber foco, que leva direto ao conteúdo principal. Assim, quem usa teclado não precisa percorrer toda a navegação com Tab em cada página. A WCAG o lista como uma técnica suficiente para o 2.4.1 Ignorar blocos, junto com landmarks e títulos.
Devo usar :focus ou :focus-visible?
:focus-visible deixa o navegador decidir quando um anel de foco é útil, então quem usa teclado o vê, enquanto cliques de mouse em botões normalmente não o desenham. Segundo o MDN, ele tem amplo suporte desde março de 2022. Estilize :focus-visible e mantenha um anel visível em todo elemento interativo.
O que é uma armadilha de teclado?
Um ponto onde o foco entra e não consegue sair pelo teclado, como um player incorporado ou uma caixa de diálogo personalizada que engole o Tab. Diálogos modais devem manter o foco dentro enquanto estão abertos, mas Escape ou um botão de fechar precisam sempre deixar o visitante sair.
Modo de navegação versus modo de foco
Leitores de tela leem páginas web em um buffer virtual em que letras isoladas fazem saltos: H para o próximo título, K para o próximo link no NVDA. Quando você cai em um campo de texto, o leitor passa para o modo de foco para que as letras sejam digitadas. NVDA+Space alterna manualmente entre os dois.
Por isso um widget personalizado que só reage às setas pode parecer quebrado. No modo de navegação o leitor pode consumir essas teclas antes que o seu script as receba, então use elementos nativos ou siga os padrões do ARIA Authoring Practices.
Como soa um bom resultado
Cada controle deve ser anunciado com um nome, uma função e, quando for o caso, um estado: Pesquisar, editar texto; Menu, botão, recolhido; Assinar, caixa de seleção, não marcada. Se faltar qualquer um dos três, corrija a marcação antes de adicionar ARIA.
Os títulos devem formar uma estrutura que daria para ler como um sumário. Abra a lista de títulos na lista de elementos do NVDA ou no rotor do VoiceOver e veja se ela faz sentido sozinha.
Registrando o que você encontra
Descreva cada problema com a página, os passos, o que você esperava e o que aconteceu, mais o critério que ele viola. Esse formato permite que um desenvolvedor o reproduza sem adivinhar.
Depois das correções, teste de novo com os mesmos passos. Problemas de foco, em especial, costumam voltar quando um cabeçalho ou um modal ganha um novo estilo.
Teclas para testar só com o teclado
Comportamento padrão do teclado no navegador
Tecla
O que deve fazer
Tab / Shift+Tab
Ir para o próximo elemento focável ou para o anterior
Enter
Seguir um link ou pressionar um botão
Space
Pressionar um botão, marcar uma caixa de seleção, rolar a página quando nada está em foco
Setas
Mover dentro de grupos de rádio, selects, menus e listas de abas
Escape
Fechar um diálogo, menu ou pop-up
Comandos do NVDA (Windows, layout de desktop)
A tecla NVDA é Insert por padrão; o guia do usuário também permite Caps Lock. As teclas de letra única funcionam no modo de navegação.
Do guia do usuário do NVDA
Ação
Teclas
Iniciar o NVDA
Control+Alt+N
Parar a fala
Control
Ler a partir daqui (ler tudo)
NVDA+Down Arrow
Alternar entre modo de navegação e de foco
NVDA+Space
Lista de elementos (links, títulos, landmarks)
NVDA+F7
Próximo título / landmark / link
Próximo campo de formulário / botão
Próxima tabela / lista
Sair do NVDA
NVDA+Q
Comandos do VoiceOver (Mac)
VO é o modificador do VoiceOver: Control e Option pressionados juntos, ou Caps Lock sozinho.
Do guia do usuário do VoiceOver da Apple
Ação
Teclas
Ligar ou desligar o VoiceOver
Command+F5
Abrir o rotor
VO+U
Trocar a lista do rotor (títulos, links e mais)
Seta para a esquerda ou para a direita dentro do rotor
Percorrer a lista escolhida
Seta para cima ou para baixo dentro do rotor
Correções para as falhas mais comuns
Link para pular ao conteúdo
Clique dentro do resultado e pressione Tab. O link só desliza para a vista quando recebe foco, e o destino dele é o elemento main.
Um anel de foco que só quem usa teclado vê
Navegue com Tab até os botões dentro do resultado. O anel deslocado fica afastado da borda do botão, e cliques de mouse normalmente o deixam escondido.
Mantenha os itens em foco fora de baixo de um cabeçalho fixo
scroll-padding-top reserva espaço no topo quando o navegador rola um elemento em foco ou uma âncora até ficar visível.
Só teclado
Pressione Tab uma vez depois que a página carregar
Aparece um link para pular ao conteúdo, que funciona com Enter
Percorra a página inteira com Tab
Todo link, botão e campo é alcançado, na ordem de leitura
Observe o anel de foco em cada parada
Ele está sempre visível e nunca fica escondido atrás de um cabeçalho fixo
Abra o menu e quaisquer dropdowns
Enter ou Space os abrem; Escape fecha e devolve o foco
Opere os widgets personalizados
Abas, sliders e carrosséis respondem às teclas esperadas
Abra e feche um diálogo
O foco entra nele, fica dentro e depois volta ao elemento que o abriu
Preencha e envie o formulário principal
Os erros são alcançáveis e o foco vai para um lugar útil
Tente ficar preso
Nenhum conteúdo incorporado ou widget prende o foco
Leitor de tela
Ouça o título da página e o primeiro título
Eles dizem em qual página você está
Abra a lista de títulos
Os títulos formam uma estrutura lógica com um único h1
Abra a lista de landmarks
As regiões de banner, navegação, principal e rodapé estão presentes
Percorra os links
O texto de cada link faz sentido fora do contexto
Visite cada campo de formulário
Todo campo anuncia um rótulo, o seu tipo e se é obrigatório
Provoque uma mensagem de erro e uma de sucesso
As duas são anunciadas sem mexer o mouse
Confira as imagens
Imagens informativas têm texto alternativo; as decorativas ficam em silêncio
Alterne um botão ou uma caixa de seleção
O novo estado, como expandido ou marcado, é anunciado
Checklist de testes
Limpar
Marque cada etapa conforme testa. As suas marcações ficam só nesta página.
{n} de {total} etapas concluídas
Nada dentro da página está em foco
campo {t}
sem nome acessível
Entre na área com Tab para começar
Área de prática de foco
Percorra estes controles com Tab. O rastreador mostra o nome do elemento que está em foco agora.