Esta página foi traduzida pela API Cloud Translation.

Como usar o tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

A ordem de guias padrão fornecida pela posição do DOM de elementos HTML semânticos é conveniente, mas pode haver momentos em que você precisa modificar a ordem das guias. Mover elementos no HTML é ideal, mas pode não ser viável. Nesses casos, é possível usar o atributo HTML tabindex para definir explicitamente a posição da guia de um elemento.

Browser Support

Source

O tabindex pode ser aplicado a qualquer elemento, embora não seja necessariamente útil em todos os elementos, e recebe um intervalo de valores inteiros. Com tabindex, é possível especificar uma ordem explícita para elementos de página com foco, inserir um elemento não focado na ordem de guias e remover elementos da ordem de guias. Exemplo:

tabindex="0": insere um elemento na ordem natural das guias. O elemento pode ser focalizado pressionando Tab e pode ser focalizado chamando o método focus() dele.

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 de guias natural. 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 aumentar.

Isso é especialmente verdadeiro para elementos que não são de entrada, como cabeçalhos, imagens ou títulos de artigos. Sempre que possível, é melhor organizar o código-fonte para que a sequência DOM forneça uma ordem lógica de guias. Se você usar tabindex, restrinja-o a controles interativos personalizados, como botões, guias, menus suspensos e campos de texto, ou seja, elementos em que o usuário pode esperar fornecer entrada.

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.

Gerenciar o foco no nível da página

Às vezes, o tabindex é necessário para uma experiência do usuário otimizada. Por exemplo, se você criar uma página única robusta com diferentes seções de conteúdo, em que nem todo o conteúdo fica visível ao mesmo tempo. 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 das guias. Essa técnica, chamada de gerenciamento de foco, mantém o contexto percebido do usuário sincronizado 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 do controle, como com componentes personalizados.

Por exemplo, o elemento select pode receber foco básico, mas, depois disso, é possível usar as teclas de seta para mostrar outras opções selecionáveis. Se você criar um elemento select personalizado, será importante replicar esse comportamento para que os usuários do teclado ainda possam interagir com o controle.

Pode ser difícil saber quais comportamentos de teclado implementar. O guia Práticas de criação de aplicativos acessíveis de Internet ricos (ARIA, na sigla em inglês) lista os tipos de componentes e os tipos de ações de teclado compatíveis.

Talvez você esteja trabalhando com elementos personalizados que se assemelham a um conjunto de botões de opção, mas com sua própria aparência e comportamento.

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

Para determinar qual suporte ao teclado é necessário, consulte o guia de práticas de criação de ARIA. A seção 2 contém uma lista de padrões de design, incluindo a tabela de características para grupos de botões de opção, o componente existente que mais se aproxima do novo elemento.

Um dos comportamentos comuns do teclado que precisa ser suportado é o uso das teclas de seta para cima/baixo/esquerda/direita. Para adicionar esse comportamento ao novo componente, usamos uma técnica chamada tabindex itinerante.

O tabindex itinerante funciona definindo tabindex como -1 para todas as crianças, exceto a ativa no momento.

<radio-group>
  <radio-button tabindex="0">Water</radio-button>
  <radio-button tabindex="-1">Coffee</radio-button>
  <radio-button tabindex="-1">Tea</radio-button>
  <radio-button tabindex="-1">Cola</radio-button>
  <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

O componente usa um listener de evento de teclado para determinar qual tecla o usuário pressiona. Quando isso acontece, ele define o tabindex do filho focado anteriormente como -1, define o tabindex do filho a ser focado como 0 e chama o método de foco nele.

<radio-group>
    <!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Quando o usuário chega à última (ou primeira, dependendo da direção em que ele está movendo o foco) criança, o foco volta para a primeira (ou última) criança.

Tente o exemplo a seguir. Inspecione o elemento nas Ferramentas do desenvolvedor para observar o tabindex passando de um botão de opção para o próximo.

Modals e armadilhas de teclado

É melhor evitar o gerenciamento manual do foco, porque isso pode levar a situações complicadas. Por exemplo, um widget de preenchimento automático que tenta gerenciar o foco e captura o comportamento da guia, mas impede que o usuário saia até que ela seja concluída. Isso é chamado de armadilha de teclado e pode ser muito frustrante para o usuário.

A seção 2.1.2 do WCAG afirma que o foco do teclado nunca deve ser bloqueado ou preso em um elemento de página específico. O usuário precisa conseguir navegar entre todos os elementos da página usando apenas o teclado.

A exceção a essa regra são os modais. No entanto, evite usar tabindex ao criar um modal. Com inert, você pode garantir que os usuários não interajam acidentalmente com um elemento (uma armadilha intencional do teclado). Use o elemento <dialog>, que é inativo por padrão, para criar um modal para os usuários, bloqueando cliques e guias fora do modal. Isso permite que o usuário se concentre em uma seleção necessária.