Armadilha de foco
O que a norma pede
Nenhum componente prende o foco do teclado: a pessoa sempre consegue entrar e sair de qualquer parte da página usando o teclado.
- 2.1.2 (A)
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:
Preveja uma saída clara, que funcione pelo teclado, em todo componente que capture a navegação, como modais e editores de texto. Todo modal precisa de um botão de fechar visível.
Modal de aviso
Um modal aparece ao entrar no site.
Errado: Fecha só clicando fora
No protótipo
Modal sem botão de fechar; some ao clicar no fundo escuro.
Quem usa teclado fica preso no modal.
Certo: Saída clara
No protótipo
Botão “Fechar” no topo; Esc também fecha.
Qualquer pessoa sai do modal.
Faça a tecla Esc fechar modais e devolver o foco ao elemento que os abriu, e prefira o elemento dialog nativo. Teste também os widgets de terceiros, como players de vídeo, para confirmar que o foco consegue sair deles.
Modal customizado
O modal de confirmação intercepta a tecla Tab.
Errado: Tab bloqueado sem saída
modal.addEventListener("keydown", (e) => { e.preventDefault(); // nenhuma tecla funciona });O foco fica preso e nada fecha o modal.
Certo: Dialog nativo
<dialog id="confirmar"> <button type="button" onclick="confirmar.close()">Fechar</button> </dialog> <!-- Esc fecha e o foco volta -->O navegador cuida da entrada e da saída do foco.
Trate a armadilha de foco como defeito bloqueante: sem mouse, a pessoa perde o que fez. Exija de fornecedores de widgets que seus componentes funcionem pelo teclado.
Contratação de um player de vídeo
A equipe escolhe um player para os vídeos institucionais.
Errado: Escolha só pelo preço
Decisão
Player escolhido sem teste de teclado.
Depois de focar no vídeo, a navegação não sai mais dele.
Certo: Teste antes de contratar
Decisão
Requisito da contratação: entrar, controlar e sair do player pelo teclado.
A barreira é evitada antes de chegar ao produto.
Entre em cada componente com Tab e tente sair pelo teclado, nos dois sentidos e com a tecla Esc. Se o foco ficar preso, registre o componente e as teclas testadas.
Mapa de unidades de atendimento
O mapa incorporado mostra os postos da cidade.
Errado: Preso no mapa
Tab → foco no mapa
Tab → mapa move para a direita
Esc → nada acontece
O foco não sai do mapa.
Certo: Entra e sai
Tab → foco no mapa
Tab → lista de unidades abaixo do mapa
Shift+Tab → volta ao mapa
O mapa não prende o foco.
Quando um componente exigir teclas próprias para sair, avise antes com uma instrução curta. Nomeie os botões de saída com palavras, como “Fechar”, e não só com um X.
Editor de texto da ouvidoria
O campo de relato usa um editor em que Tab insere recuo.
Errado: Sem orientação
Na tela
Campo “Relato” sem nenhuma instrução.
A pessoa aperta Tab e não sai do campo.
Certo: Orientação antes do campo
Na tela
“Neste campo, Tab faz recuo. Para sair, aperte Esc e depois Tab.”
A pessoa sabe como continuar.