Controles interativos são focalizáveis pelo teclado

Publicado em: 2 de maio de 2019

Verifique manualmente se todos os controles personalizados podem ser focados com o teclado e mostram um indicador de foco. A ordem em que os elementos são focados deve seguir a ordem do DOM. Se você não souber quais elementos precisam receber foco, consulte o módulo de foco no curso Aprenda acessibilidade no web.dev.

Como testar manualmente

Para testar se o controle personalizado pode ser focado e mostra um indicador de foco, comece navegando pelo seu site com a tecla Tab. Use TAB (ou SHIFT + TAB) para navegar entre os controles e as teclas de seta, além de ENTER e SPACE, para manipular os valores (consulte também Fundamentos do acesso por teclado):

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

Como corrigir

Se não for possível navegar por todos os elementos de uma página com a tecla Tab, 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 de tabulação natural usando tabindex="0". Consulte também Controlar o foco com tabindex. Exemplo:

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

Talvez seja necessário adicionar as funções ARIA adequadas aos elementos de controle personalizados. Consulte Controles personalizados têm papéis ARIA.

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

Por que isso importa

Para usuários que não podem ou não querem usar um mouse, a navegação por teclado é a principal forma de acessar tudo em uma tela. Boas experiências de teclado dependem de uma ordem de tabulação lógica e estilos de foco discerníveis. Se um usuário de teclado não conseguir ver ou saber o que está em foco, ele não terá como interagir com a página.

Saiba mais sobre acessibilidade em Learn Accessibility.

Recursos