Esta página foi traduzida pela API Cloud Translation.

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 deve ser usada sempre que possível. No entanto, se você precisar criar elementos interativos personalizados, é possível criar o comportamento esperado do usuário adicionando tabindex.

Compatibilidade com navegadores

Origem

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ê-la sem adicionando foco.

O que é tabindex?

Caso você precise modificar a ordem de tabulação padrão fornecida pelo gerenciador , é possível usar o atributo HTML tabindex para definir explicitamente um à posição da guia do 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, será possível especificar uma ordem explícita para elementos de página focalizáveis, inserir um elemento que seria sem foco na ordem de tabulação e remover elementos na 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 coloca esse elemento em primeiro plano 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 antipadrão.

Garantir que os controles possam ser acessados 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 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 e atribua a ela um tabindex de -1 e chamar o método focus dele. Isso garante que o conteúdo não apareça em 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. A Criação de Accessible Rich Internet Applications (ARIA) autoria Práticas lista os tipos de componentes e os tipos de ações do 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 o elemento ainda pode ser focado 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, que impede que elementos sejam selecionados ou lidos por tecnologias assistivas.

Cuidado : o polyfill de inert é experimental e pode não funcionar como esperado em todos os casos. Teste com cuidado antes de usar na produção.

Evite `tabindex > 0`

Qualquer tabindex maior que 0 leva o elemento para a frente da guia natural ordem. Se houver vários elementos com tabindex maior que 0, a guia A ordem começa no menor valor 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 em ordem por DOM, não por tabulação. Se você precisar elemento seja exibido mais cedo na ordem de tabulação, ele deve ser movido para um ponto anterior no DOM.

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

Usar a "mecha `tabindex`"

Se você está criando um componente complexo, pode ser necessário adicionar mais teclados suporte além do foco. Sempre que possível, use o elemento select integrado. Está focalizável e permite que as teclas de seta exponham outros elementos selecionáveis .

Para implementar funções semelhantes nos seus componentes, é possível usar uma técnica conhecida como "tabindex móvel". 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 do filho que estava em foco. como -1, define o tabindex da criança a ser focada como 0 e chama a função focus() um método de validação.

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 precisar, consulte o Práticas de criação ARIA 1.1. Este guia lista padrões comuns de IU e identifica quais chaves a que os componentes devem suportar.