Os controles personalizados têm rótulos associados

Os controles interativos personalizados devem ser focalizáveis. Se você usar JavaScript para transformar um <div> em um menu suspenso sofisticado, ele não será inserido automaticamente na ordem da tabulação. Verifique manualmente se todos os controles personalizados são focalizáveis do teclado. Consulte também Conceitos básicos de acesso ao teclado.

Como testar manualmente

Para testar se o controle personalizado é focalizável, pressione a tecla TAB para navegar pelo site:

Você consegue acessar todos os controles interativos na página? Caso contrário, talvez seja necessário usar tabindex para melhorar a focalização desses controles. Consulte também Controlar foco com tabindex.

Como corrigir

Para tornar um controle personalizado focalizável, insira o elemento de controle personalizado na ordem de tabulação natural usando tabindex="0". Exemplo:

<div tabindex="0">Focus me with the TAB key</div>

Por que isso é importante

Para usuários que não podem ou optam por não usar um mouse, a navegação pelo teclado é o principal meio de alcançar tudo em uma tela. Boas experiências de digitação dependem de uma ordem lógica de tabulação e de estilos de foco facilmente diferenciadas. Se um usuário de teclado não consegue ver o que está em foco, ele não tem como interagir com a página.

Saiba mais em Como fazer uma avaliação de acessibilidade.

Recursos