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, poderá criar o comportamento esperado do usuário
adicionando tabindex.
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 entendê-lo sem
adicionar foco.
O que é tabindex?
Quando você precisar modificar a ordem de tabulação padrão fornecida pelos elementos
integrados, use o atributo HTML tabindex para definir explicitamente a
posição da 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, você pode especificar uma ordem explícita para elementos de página focalizáveis,
inserir um elemento que não seria focalizável na ordem da tabulação e remover elementos
da ordem. Exemplo:
tabindex="0": insere um elemento na ordem natural de tabulação. O elemento pode
ser focado pressionando Tab, e o elemento pode ser focado chamando
o método focus().
tabindex="-1": remove um elemento da ordem natural de tabulação, mas o elemento
ainda pode ser focado chamando o método focus().
tabindex="5": qualquer tabindex maior que 0 coloca esse elemento na frente
da ordem natural de tabulação. Se houver vários elementos com um tabindex maior
que 0, a ordem da tabulação começará pelo valor mais baixo que for maior que zero
e vai subindo. O uso de um tabindex maior que 0 é considerado um
antipadrão.
Garantir que os controles possam ser acessados 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 da 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, 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
de conteúdo fica oculto em pontos diferentes do carregamento da página. Isso pode significar
que os links de navegação mudam o conteúdo visível sem que a página seja atualizada.
Nesse caso, identifique a área de conteúdo selecionada, atribua 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 em sincronia com o conteúdo visual do site.
Gerenciar o foco em componentes
Em alguns casos, você também precisa gerenciar o foco no nível de controle, como com elementos personalizados.
Saber quais comportamentos de teclado implementar pode ser difícil. O guia Práticas de criação de aplicativos de rich Internet acessíveis (ARIA, na sigla em inglês) lista os tipos de componentes e os tipos de ações de teclado compatíveis.
Inserir um elemento na ordem da tabulação
Insira 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 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.
Se eles estiverem na ordem de tabulação naturalmente ou devido a um valor tabindex,
eles permanecerão nessa ordem.
Para remover um elemento e todos os filhos dele da ordem de tabulação, considere usar
o polyfill inert do WICG.
O polyfill emula o comportamento de um atributo inert proposto,
o que impede que 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 tabindex maior que 0, a ordem
da tabulação vai começar pelo valor mais baixo maior que zero e vai subindo.
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 da guia. Se você precisar que um
elemento apareça mais cedo na ordem da tabulação, ele precisará ser movido 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 [tabindex] maior que 0".
Usar a "mecha tabindex"
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 componentes, use uma técnica conhecida
como "tabindex itinerante". O tabindex itinerante define tabindex como -1 para
todos os filhos, exceto o que estiver 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 o tabindex do filho que estava em foco anteriormente
como -1, define o tabindex do filho a ser focado 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>
Roteiros de acesso ao teclado
Se você não tiver certeza de qual nível de suporte de 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.