Elementos HTML padrão, como <button>
ou <input>
, têm acessibilidade de teclado
integrada e deve ser usada 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 ela 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 tabulação e remover elementos
da ordem de tabulação. Exemplo:
tabindex="0"
: insere um elemento na ordem natural de tabulação. O elemento pode
focar 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 seu 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 no valor mais baixo que é maior que zero
e avança cada vez mais. Usar um tabindex maior do que 0
é considerado um
anti-padrão.
Garantir que os controles sejam acessíveis pelo teclado
Uma ferramenta como o Lighthouse é ótima para detectar automaticamente certos tipos 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 entrar em contato
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 alguns
o conteúdo está oculto em pontos diferentes 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 em
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 de teclado implementar pode ser difícil. O Criação de ARIA (Accessible Rich Internet Applications) Práticas lista os tipos de componentes e os tipos de ações do teclado compatíveis.
Inserir um elemento na ordem de 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 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 estiverem na ordem de tabulação naturalmente ou devido a um valor tabindex
,
elas vão permanecer na ordem de tabulação.
Para remover um elemento e todos os seus filhos 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 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 usando 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 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
pode receber foco e permite que as teclas de seta exibam outras opções
selecionáveis.
Para implementar funções semelhantes nos seus componentes, é possível usar uma técnica conhecida
como "tabindex
mecha". O tabindex móvel funciona definindo tabindex
como -1 para
todos os filhos, exceto o que estiver ativo no momento. Em seguida, o componente usa um teclado
listener de eventos 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 precisar, consulte o Práticas de criação ARIA 1.1. Este guia lista padrões comuns de interface e identifica quais chaves a que os componentes devem suportar.