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 precisam 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 importante, os usuários de leitores de tela podem entender o conteúdo sem adicionar foco.

O que é tabindex?

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

A tabindex pode ser aplicada a qualquer elemento, embora só deva ser aplicada a elementos interativos, e usa um intervalo de valores inteiros. Com tabindex, é possível especificar uma ordem explícita para elementos de página focalizáveis, inserir um elemento que, de outra forma, não seria focalizável na ordem de guias e remover elementos da ordem de guias. Exemplo:

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

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

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

Garantir que os controles sejam acessíveis pelo teclado

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

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 o 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 única página robusta com diferentes seções de conteúdo, em que parte do conteúdo fica oculto em diferentes pontos do 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 gerenciamento de foco, mantém o contexto percebido pelo usuário em sincronia 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 de controle, como com elementos personalizados.

Saber quais comportamentos do teclado implementar pode ser difícil. O guia Práticas de autoria dos Aplicativos Ricos Acessíveis de Internet (ARIA) lista os tipos de componentes e os tipos de ações do teclado que eles suportam.

Inserir um elemento na ordem da tabulação

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

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

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

Remover um elemento da ordem das guias

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 guias, mas o elemento ainda pode ser centralizado chamando o método focus() dele.

Aplicar tabindex="-1" a um elemento não afeta os filhos dele. Se eles estiverem na ordem de guias naturalmente ou devido a um valor tabindex, eles vão permanecer na ordem de guias. Para remover um elemento e todos os filhos dele da ordem de guias, 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 passa o elemento para a frente da ordem natural de tabulação. Se houver vários elementos com um tabindex maior que 0, a ordem de tabulação vai começar pelo valor mais baixo maior que zero e vai subindo.

Usar um tabindex maior que 0 é considerado um anti-padrão porque os leitores de tela navegam pela página na ordem do DOM, não na ordem das guias. Se você precisar que um elemento apareça mais cedo na ordem das guias, ele precisará ser movido para um local anterior no DOM.

Com o Lighthouse, é possível identificar elementos com 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 móvel"

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

Para implementar funções semelhantes 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 aquele que está ativo atualmente. Em seguida, o componente usa um listener de evento de teclado para determinar qual tecla o usuário pressionou.

Quando isso acontece, o componente define o tabindex da filha focada anteriormente como -1, define o tabindex da filha a ser focada como 0 e chama o método focus() nela.

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 de teclado seus componentes personalizados precisam, consulte as Práticas de autoria do ARIA 1.1. Este guia lista padrões comuns de interface e identifica quais chaves seus componentes precisam oferecer suporte.