Controlar o foco com o tabindex

Elementos HTML padrão, como <button> ou <input>, têm acessibilidade de teclado integrada sem custo financeiro. No entanto, se você estiver criando componentes interativos personalizados, use o atributo tabindex para garantir que eles sejam acessíveis pelo teclado.

Verificar se os controles podem ser acessados pelo teclado

Uma ferramenta como o Lighthouse é ótima para detectar determinados problemas de acessibilidade, mas algumas coisas só podem ser testadas por um ser humano.

Tente pressionar 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 capacidade de foco desses controles.

Inserir um elemento na ordem de tabulação

Insira um elemento na ordem de tabulação natural usando tabindex="0". Exemplo:

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

Para focar um elemento, pressione a tecla Tab ou chame o método focus().

Remover um elemento da ordem de tabulação

Remova um elemento usando tabindex="-1". Exemplo:

<button tabindex="-1">Can't reach me with the TAB key!</button>

Isso remove um elemento da ordem natural de tabulação, mas o elemento ainda pode ser focado chamando o método focus().

Observe que aplicar tabindex="-1" a um elemento não afeta os filhos dele. Se eles estiverem naturalmente na ordem de tabulação ou devido a um valor tabindex, eles permanecerão na ordem de tabulação. Para remover um elemento e todos os filhos dele da ordem da tabulação, use o polyfill inert do WICG. O polyfill emula o comportamento de um atributo inert proposto, o que impede que os elementos sejam selecionados ou lidos por tecnologias adaptativas.

Evite tabindex > 0

Qualquer tabindex maior que 0 pula o elemento para a frente da ordem de tabulação natural. Se houver vários elementos com uma tabindex maior que 0, a ordem de tabulação vai começar pelo valor menor maior que zero e subir.

Usar um tabindex maior que 0 é considerado um antipadrão porque os leitores de tela navegam pela página na ordem do DOM, não na ordem da tabulação. Se você precisar que um elemento apareça antes na ordem de tabulação, ele deverá ser movido para um local anterior no DOM.

O Lighthouse facilita a identificação de elementos com tabindex > 0. Execute a auditoria de acessibilidade (Lighthouse > Options > Accessibility) e procure os resultados da auditoria "Nenhum elemento tem um valor de [tabindex] maior que 0".

Criar componentes acessíveis com "tabindex itinerante"

Se você estiver criando um componente complexo, talvez seja necessário adicionar mais suporte ao teclado além do foco. Considere o elemento select integrado. Ela é focalizável, e você pode usar as teclas de seta para expor outras funcionalidades (as opções selecionáveis).

Para implementar uma funcionalidade semelhante nos seus próprios componentes, use uma técnica conhecida como "tabindex itinerante". O tabindex itinerante funciona definindo tabindex como -1 para todos os filhos, exceto o que está ativo no momento. Em seguida, o componente usa um listener de eventos de teclado para determinar qual tecla o usuário pressionou.

Quando isso acontece, o componente define a tabindex do filho que estava em foco como -1, define a tabindex do filho a ser em foco como 0 e chama o método focus().

Antes

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

Depois

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

O que fazer: DevSite - Avaliação de reflexão e verificação

Receitas de acesso ao teclado

Se você não tiver certeza de qual nível de suporte a teclado seus componentes personalizados podem precisar, consulte as Práticas de criação de ARIA 1.1 (em inglês). Este guia prático lista padrões de IU comuns e identifica com quais chaves seus componentes precisam oferecer suporte.