Abrange práticas para garantir que toda funcionalidade seja acessível apenas com teclado, com foco visível e ordem de tabulação lógica, cobrindo botões, links, menus, modais, formulários, controles de mídia e atividades interativas.
Regras para permitir navegação completa apenas com teclado, com foco visível e sequência lógica.
Foco sempre visível, ordem coerente de tabulação, saída de menus sem armadilhas e gestão correta de atalhos de teclas garantem que elementos interativos possam ser alcançados e ativados via teclado (Tab, Shift+Tab, Enter, Espaço, ESC, setas).
Pessoas que não usam mouse dependem do teclado. Sem foco visível e ordem lógica, a navegação é inviável.
Usuários com deficiência motora, cegos (que usam leitores de tela) e pessoas com baixa visão dependem do teclado. Até mesmo em situações temporárias, nas quais a pessoa não tem acesso a um mouse, o acesso pode ser garantido com o uso do teclado exclusivamente. Se o foco não aparece, o usuário “se perde” na página. "Armadilhas", como modais ou carrosséis que ficam travados e não deixam o usuário avançar tornam o conteúdo inutilizável. O cumprimento das normas garante inclusão e usabilidade, além de conformidade legal.
Sempre que houver elementos interativos.
Deve ser aplicado a todo produto digital.
Garanta operabilidade por teclado, ordem lógica e foco visível.
• Use elementos nativos (<button>, <a>).
• Evite tabindex positivos.
• Personalize o outline (borda) apenas se oferecer foco perceptível e com contraste.
• Permita que menus, carrosséis e diálogos sejam navegados e fechados com ESC.
• Garanta que os atalhos de tecla única sejam desativáveis ou exijam modificadores (Ctrl/Alt).
• Em modais: mova foco para dentro quando abrir, devolva ao acionador quando fechar.
Realize testes com Tab, Shift+Tab, Enter, Espaço e ESC; verificar foco visível.
Deve ser aplicado a todo produto digital.
Site com outline e Modal com foco visível e ESC promovem acessbilidade. Site sem outline prejudica.
Corretos:
• Modal abre com Enter, o foco vai para o título; ESC fecha e o foco retorna ao botão.
• Formulário com ordem lógica de campos e mensagens de erro anunciadas no foco.
Incorretos:
• Site com outline: none, ou seja, sem indicação de foco.
• Menu que só abre com clique de mouse.
• Modal que abre, mas o foco continua atrás e não retorna ao acionador.
• Não remova outline (contorno).
• Não prenda foco.
• Não crie menus inacessíveis.
• Não remova o contorno de foco (outline: none) sem fornecer uma alternativa perceptível.
• Não utilize <div> ou <span> como botão sem garantir suporte total ao teclado.
• Não crie modais ou carrosséis que impeçam o usuário de sair utilizando apenas o teclado.
• Não quebre a ordem natural de tabulação usando valores positivos de tabindex.
• Não implemente atalhos de teclado que interfiram na digitação em campos de texto (ex.: pressionar “s” dentro de um input).
Recursos adicionais serão disponibilizados em breve.
WCAG 2.1.1 (Teclado, nível A): toda funcionalidade deve estar disponível pelo teclado.
WCAG 2.4.7 (Foco visível, nível AA): foco do teclado deve ser claramente perceptível.
WCAG 2.1.2 (Sem armadilha de teclado, nível A): não impedir o usuário de sair de um componente.
WCAG 2.4.3 (Ordem do foco, nível A): foco deve seguir ordem lógica.
WCAG 2.1.4 (Atalhos de tecla, nível A): atalhos não podem interferir na digitação.
NBR 17225: norma brasileira convergente às diretrizes internacionais.
eMAG: guia de acessibilidade para governo eletrônico.
