Controlar o foco com o tabindex

Rob Dodson

Alexandra Klepper

Elementos HTML padrão, como <button> ou <input>, têm acessibilidade de teclado integrada e devem ser usados sempre que possível. No entanto, se você precisar criar elementos interativos personalizados, adicione tabindex para criar o comportamento esperado do usuário.

Adicione tabindex apenas a conteúdo interativo. Mesmo que o conteúdo seja importante, como uma imagem principal, os usuários de leitores de tela podem entender sem adicionar foco.

O que é tabindex?

Se você precisar modificar a ordem de tabulação padrão fornecida por elementos integrados, use o atributo HTML tabindex para definir explicitamente a posição de tabulação de um elemento.

tabindex pode ser aplicado a qualquer elemento, mas apenas a elementos interativos, e usa um intervalo de valores inteiros. Com tabindex, é possível especificar uma ordem explícita para elementos da página que podem receber foco, inserir um elemento que não pode receber foco na ordem de tabulação e remover elementos dessa ordem. Exemplo:

tabindex="0": insere um elemento na ordem natural de tabulação. O elemento pode ser focado pressionando Tab ou chamando o método focus() dele.

tabindex="-1": remove um elemento da ordem natural de tabulação, mas ele ainda pode ser focado chamando o método focus().

tabindex="5": qualquer tabindex maior que 0 traz esse elemento para a frente da ordem de tabulação natural. Se houver vários elementos com um tabindex maior que 0, a ordem de tabulação começará do menor valor maior que zero e aumentará gradualmente. Usar um tabindex maior que 0 é considerado um antipadrão.

Verificar se os controles podem ser acessados com o teclado

Uma ferramenta como o Lighthouse é ótima para detectar automaticamente determinados problemas de acessibilidade, mas alguns testes ainda precisam ser feitos manualmente por uma pessoa.

Tente pressionar a tecla Tab para navegar pelo site. Você consegue alcançar todos os controles interativos na página? Caso contrário, talvez seja necessário usar tabindex para melhorar a capacidade de foco desses controles.

Gerenciar o foco no nível da página

Às vezes, o tabindex ajuda a criar uma experiência do usuário perfeita. Por exemplo, se você criar uma página única robusta com diferentes seções de conteúdo, em que parte do conteúdo fica oculta em diferentes pontos no carregamento da página. Isso pode significar que os links de navegação mudam o conteúdo visível sem atualizar a página.

Nesse caso, identifique a área de conteúdo selecionada e atribua a ela um tabindex de -1 e chame o método focus. Isso garante que o conteúdo não apareça na ordem natural de tabulação. Essa técnica, chamada de gerenciamento de foco, mantém o contexto percebido pelo usuário sincronizado com o conteúdo visual do site.

Gerenciar o foco em componentes

Em alguns casos, também é necessário gerenciar o foco no nível do controle, como com elementos personalizados.

Pode ser difícil saber quais comportamentos de teclado implementar. O guia de práticas de criação de aplicativos avançados de Internet acessíveis (ARIA) lista tipos de componentes e quais tipos de ações de teclado eles oferecem suporte.

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() do elemento.

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 ele ainda pode ser focado chamando o método focus().

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

Evite tabindex > 0

Qualquer tabindex maior que 0 move o elemento para a frente da ordem de tabulação natural. Se houver vários elementos com um tabindex maior que 0, a ordem de tabulação começa do menor valor maior que zero e aumenta.

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

Com o Lighthouse, é possível identificar elementos com um tabindex > 0. Execute a auditoria de acessibilidade (Lighthouse > Opções > Acessibilidade) e procure os resultados da auditoria "Nenhum elemento tem um valor de [tabindex] maior que 0".

Usar "tabindex itinerante"

Se você estiver criando um componente complexo, talvez seja necessário adicionar suporte extra ao teclado além do foco. Sempre que possível, use o elemento select integrado. Ele é focado e permite que as teclas de seta mostrem outras opções selecionáveis.

Para implementar funções semelhantes nos seus próprios componentes, use uma técnica conhecida como "tabindex móvel". O tabindex móvel 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 do teclado para determinar qual tecla o usuário pressionou.

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

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>

Receitas de acesso ao teclado

Se você não tiver certeza de qual nível de suporte ao teclado seus componentes personalizados podem precisar, consulte as Práticas de criação de ARIA 1.1. Este guia lista padrões comuns de interface e identifica quais chaves seus componentes precisam oferecer suporte.