Controles interativos são focalizáveis pelo teclado

Verifique manualmente se todos os controles personalizados podem ser focados pelo teclado e mostram um indicador de foco. A ordem em que os elementos estão focados deve seguir a ordem do DOM. Se você não tiver certeza de quais elementos devem receber o foco, consulte o módulo de foco no curso de Acessibilidade do Google no web.dev.

Como testar manualmente

Para testar se o controle personalizado pode receber foco e exibe um indicador de foco, comece navegando pelo site. Use TAB (ou SHIFT + TAB) para alternar entre controles e use as teclas de seta e ENTER e SPACE para manipular os valores. Consulte também Noções básicas de acesso ao teclado:

Você consegue acessar todos os controles interativos na página? Há um indicador de foco em cada controle interativo?

Como corrigir

Se você não conseguir alternar entre todos os elementos de uma página, use tabindex para melhorar a capacidade de foco desses controles.

Para tornar um controle personalizado focalizável, insira o elemento de controle personalizado na ordem natural de tabulação usando tabindex="0". Consulte também Controlar o 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 Os controles personalizados têm papéis ARIA.

Se você não encontrar um indicador de foco, use :focus para mostrar sempre um indicador de foco. Não importa se você usa um mouse ou um teclado para navegar, o indicador de foco do botão sempre tem a mesma aparência (consulte também Estilo de foco).

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 do teclado não conseguir ver ou saber o que está em foco, ele não vai poder interagir com a página.

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

Recursos