Identificando armadilhas de teclado

Uma armadilha de teclado é qualquer lugar em que o foco entra, mas não consegue sair usando o teclado. Para um usuário sem mouse, é um beco sem saída. 🪤

Um usuário preso pode ter de recarregar a página inteira apenas para escapar. A WCAG considera uma armadilha sem saída uma falha, não um pequeno erro.

Armadilhas adoram componentes avançados: seletores de data personalizados, editores incorporados e plugins de terceiros que capturam o foco e nunca o devolvem.

Uma caixa de diálogo que intercepta Tab, mas não oferece uma maneira de sair, é a armadilha mais comum. Um modal real deve ser fechado com Escape.

Conteúdo incorporado, como um vídeo ou mapa, fica em um iframe. Alguns capturam o foco e deixam o usuário preso circulando internamente, sem saída.

Um script que chama preventDefault na tecla Tab pode bloquear o movimento normal do navegador. De repente, o foco simplesmente se recusa a avançar.

Algumas armadilhas permitem avançar com Tab, mas bloqueiam Shift+Tab. Teste as duas direções, pois um caminho de mão única ainda é uma armadilha.

Manter o foco dentro de um modal aberto é correto quando feito de propósito. A regra é que sempre deve existir uma saída clara, como Escape ou um botão de fechar.

O teste é direto e eficaz. Percorra toda a página usando apenas o teclado com Tab e nunca recorra ao mouse para escapar.

Se o foco continuar circulando dentro de um componente e Tab não conseguir levá-lo adiante, você encontrou uma armadilha. Anote exatamente onde ficou preso.

A solução é restaurar uma saída: permita que Tab continue, respeite Escape e, ao fechar, devolva o foco ao acionador que abriu a camada.

Identifique o que realmente define uma armadilha de teclado.

Uma armadilha mantém o foco sem uma saída pelo teclado, violando a WCAG. Percorra tudo com Tab nas duas direções e sempre ofereça um caminho de saída. ✅