Confira manualmente se todos os controles personalizados são focalizáveis pelo teclado e mostram um indicador de foco. A ordem em que os elementos são focados deve seguir a ordem DOM. Se você não sabe quais elementos precisam receber foco, consulte Introdução ao foco.
Como testar manualmente
Para testar se o controle personalizado é focalizável e exibe um indicador de foco, comece navegando pelo site.
Use TAB (ou SHIFT +
TAB) para alternar entre os controles e as teclas de seta e
ENTER e SPACE para manipular os valores.
Consulte também Conceitos básicos de acesso ao teclado:
Você consegue acessar todos os controles interativos na página? Existe um indicador de foco em cada controle interativo?
Como corrigir
Se não for possível usar a tecla Tab para percorrer todos os elementos de uma página,
talvez seja necessário usar tabindex para melhorar a centralização desses controles.
Para tornar um controle personalizado focalizável,
insira o elemento de controle personalizado na ordem de tabulação natural usando tabindex="0"
(consulte também Controlar foco com tabindex).
Exemplo:
<div tabindex="0">Focus me with the TAB key</div>
Talvez também seja necessário adicionar as funções ARIA apropriadas aos elementos de controle personalizados. Consulte Controles personalizados têm papéis ARIA.
Se você não estiver vendo um indicador de foco,
use :focus para sempre mostrar um.
Não importa se você usa um mouse ou um teclado para usar a tecla Tab,
o indicador de foco do botão sempre tem a mesma aparência
(consulte também Foco de estilo).
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.