5.1.1.15 - Requisitos para indicar o foco de navegação
Descrição
Deve haver indicador de foco de navegação. Os aplicativos devem permitir que recursos de tecnologia assistiva que suportam indicador de foco visível em navegação sequencial, como leitores de tela, exibam esse indicador adequadamente.
Exemplo
Uma pessoa com baixa visão, dislexia ou baixa alfabetização que utiliza um leitor de tela para navegar por um aplicativo consegue identificar visualmente em qual posição da tela o foco está.
Desempenho funcional
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Certifique-se de que o indicador de foco seja visualmente destacado e claramente visível ao navegar pelos elementos interativos (botões, links, campos) em ordem sequencial. Isso facilita a navegação tanto para usuários regulares quanto para aqueles que utilizam teclados ou tecnologias assistivas.
Desenhe o estado de foco
Todo elemento interativo precisa de um estado de foco visível e com contraste.
Certo: Foco destacado
anotação de especificação
Botão focado: contorno de 3px, cor com contraste de 3:1 sobre o fundo.
Errado: Foco não desenhado
anotação de especificação
Protótipo só com estados normal e pressionado; foco não especificado.
No código, implemente estilos CSS que realcem o foco de navegação, como :focus ou outline, garantindo que elementos interativos tenham um indicador visível quando navegados por teclado ou leitores de tela, assegurando compatibilidade com tecnologias assistivas.
Nunca remova o contorno de foco
Se trocar o estilo padrão, garanta outro indicador tão visível quanto.
Certo: Foco personalizado visível
button:focus-visible { outline: 3px solid #026AA2; outline-offset: 2px; }Quem navega por teclado vê onde está.
Errado: Contorno removido
*:focus { outline: none; }O foco fica invisível.
Aprenda a fazer com conteúdos selecionados para você
Estabeleça diretrizes claras para que o desenvolvimento e design sigam práticas de acessibilidade, garantindo que o indicador de foco seja consistente em toda a aplicação, permitindo a navegação eficaz para todos os tipos de usuários.
Defina um padrão de foco
Inclua o estado de foco no sistema de design e confira nos componentes.
Checklist do requisito 5.1.1.15: componentes
- foco visível
Botões
componente
- foco visível
Links
componente
- pendente
Cards clicáveis
componente
2 de 3 componentes em conformidade, 1 pendente de revisão.
Verificar a presença de indicadores de foco
Confirmar que todos os elementos interativos da aplicação, como links, botões e campos de formulário, apresentam um indicador de foco visível ao receberem foco. Teste a navegação sequencial utilizando o teclado (por exemplo, a tecla Tab) e leitores de tela para garantir que o indicador de foco é exibido corretamente em todos os elementos interativos.
Inspecionar a visibilidade do foco
Garantir que o indicador de foco seja suficientemente visível, mesmo em telas com diferentes contrastes e resoluções. Ajustar estilos CSS se necessário para melhorar a clareza do foco.
Testar diferentes combinações de cores e temas
Verificar se o indicador de foco é visível em diferentes configurações de contraste de cores e temas do aplicativo, especialmente em modos de alto contraste.
Validar a consistência do foco
Confirmar que o comportamento do foco é consistente em toda a aplicação, para que o usuário possa antecipar e seguir o indicador de forma previsível.
Checar compatibilidade com tecnologias assistivas
Utilizar ferramentas de tecnologia assistiva, como leitores de tela e ampliadores de tela, para garantir que o foco visível é destacado adequadamente durante a navegação sequencial.
Verificar a acessibilidade em diferentes dispositivos
Testar a presença e visibilidade do indicador de foco em dispositivos móveis e desktop para assegurar uma experiência de navegação consistente.
Implementar personalização de foco
Caso necessário, permitir que o usuário personalize a aparência do indicador de foco para atender às suas necessidades específicas, como ajustes de cor e espessura.
Navegue só com o teclado
Aperte Tab do início ao fim da tela e acompanhe o indicador de foco.
Certo: Foco sempre visível
Tab → contorno no link Início
Tab → contorno no campo de busca
Tab → contorno no botão Buscar
Sempre dá para saber onde está o foco.
Errado: Foco some
Tab → contorno no link Início
Tab → nenhum destaque visível
Tab → nenhum destaque visível
A pessoa se perde na tela.
Todos os elementos de interface, tais como botões, campos de texto, títulos, entre outros devem ter o foco visivel. Essa indicação facilita a navegação sequencial para quem usa leitor de tela ou outras tecnologias assistivas.
Oriente a navegação por teclado
Quando houver ajuda de navegação, descreva-a sem depender do mouse.
Certo: Instrução independente de mouse
texto de ajuda
"Use Tab para avançar e Shift+Tab para voltar entre os campos."
Funciona para quem usa teclado.
Errado: Instrução só para mouse
texto de ajuda
"Passe o mouse sobre o item para ver as opções."
Exclui quem navega por teclado.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.