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>
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.