Os controles interativos personalizados precisam ser focalizáveis. Por exemplo, se você usar
JavaScript para transformar um <div> em um menu suspenso sofisticado, esse menu não será
inserido automaticamente na ordem de guias correta.
É necessário verificar manualmente se todos os controles personalizados podem ser focalizados pelo teclado.
Sempre que possível, use elementos HTML semânticos que permitam interação.
Como testar
Para testar se o controle personalizado é focalizável, pressione a tecla TAB para navegar pelo site:
Você consegue acessar todos os controles interativos da página?
Caso contrário, talvez seja necessário usar tabindex para melhorar a capacidade de foco desses controles.
Consulte também Controlar o foco com tabindex.
Como corrigir
Para tornar um controle personalizado com foco, insira o elemento de controle personalizado na
ordem de guias 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 escolhem não usar um mouse, a navegação pelo teclado é o principal meio de acessar tudo em uma tela. Boas experiências com teclado dependem de uma ordem lógica de guias e estilos de foco discerníveis. Se um usuário de teclado não puder ver o que está em foco, ele não terá como interagir com a página.
Se você não tem experiência com testes de acessibilidade, recomendamos que aprenda sobre testes manuais de acessibilidade e testes de tecnologia adaptativa.