Indicador de foco visível
O que a norma pede
Todo elemento que recebe foco pelo teclado mostra, na tela, um sinal claro de que está em foco.
- 2.4.7 (AA)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Desenhe o estado de foco de cada componente interativo no sistema de design, com contorno ou mudança de forma que apareça em qualquer fundo do produto. Uma troca sutil de cor não basta para quem navega pelo teclado.
Especificação do botão principal
O time de design entrega os estados do botão para desenvolvimento.
Errado: Foco não especificado
Na especificação
Estados: padrão, hover, pressionado, desativado.
Sem o estado de foco, cada pessoa desenvolvedora inventa um, ou nenhum.
Certo: Foco desenhado como estado
Na especificação
Foco: contorno de 3px em #026AA2, afastado 2px da borda, igual em todos os fundos.
O foco faz parte do componente e chega igual ao produto.
Mantenha o indicador de foco do navegador ou coloque outro tão visível quanto no lugar. Nunca use outline: none sem substituto e prefira :focus-visible para mostrar o foco a quem usa o teclado.
CSS global do site
O reset de estilos do projeto trata o foco de todos os elementos.
Errado: Foco removido de tudo
*:focus { outline: none; }Quem navega por teclado não sabe mais onde está.
Certo: Foco próprio e visível
:focus-visible { outline: 3px solid #026AA2; outline-offset: 2px; }O foco aparece sempre que a pessoa usa o teclado.
Inclua o foco visível em todos os elementos interativos nos critérios de aceite e peça que o sistema de design documente esse estado. Quando o foco sumir em fluxos críticos, como login e pagamento, trate a correção como prioridade.
Critério de aceite da nova tela
A história de usuário da tela de agendamento vai para desenvolvimento.
Errado: Acessibilidade genérica
No backlog
“A tela deve ser acessível.”
Ninguém sabe o que verificar; o foco passa sem teste.
Certo: Critério verificável
No backlog
“Ao navegar com Tab, todo botão, link e campo mostra contorno de foco visível.”
O critério diz o que conferir antes de entregar.
Deixe o mouse de lado e percorra a página com Tab e Shift+Tab. Em todo momento você deve conseguir apontar onde está o foco; registre o componente e o passo em que ele deixou de aparecer.
Percorrendo o cabeçalho com Tab
A pessoa testadora navega só com o teclado.
Errado: O foco desaparece
Tab → contorno no logo
Tab → nenhum destaque visível
Tab → nenhum destaque visível
Dois itens do menu não mostram o foco: é defeito.
Certo: Sempre dá para saber onde está
Tab → contorno no logo
Tab → contorno em “Serviços”
Tab → contorno em “Entrar”
O foco é visível em todos os passos.
Escreva instruções que sirvam para quem usa o teclado, como “selecione” no lugar de “clique”. Quando houver ajuda de navegação, informe as teclas que funcionam.
Ajuda do formulário
Um texto explica como navegar pelo formulário de inscrição.
Errado: Instrução só para mouse
Texto de ajuda
“Clique em cada campo para preenchê-lo.”
Quem usa teclado não sabe como avançar.
Certo: Instrução para todos
Texto de ajuda
“Selecione cada campo para preenchê-lo. Pelo teclado, use Tab para avançar e Shift+Tab para voltar.”
A instrução serve a qualquer forma de navegar.