A ordem de guia 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 de guia. Mover elementos no HTML é o ideal, mas pode não ser viável. Nesses casos, você
pode usar o atributo HTML tabindex
para definir explicitamente a posição da guia de um
elemento.
tabindex
pode ser aplicado a qualquer elemento, embora não seja necessariamente
útil em todos os elementos, e recebe uma gama 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 guias e remover elementos
da ordem de guias. Exemplo:
tabindex="0"
: insere um elemento na ordem natural de tabulação. O elemento pode
ser focado pressionando Tab e 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
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 a partir do valor mais baixo que é maior que zero
e vai subindo.
Isso é particularmente verdadeiro para elementos não interativos, como cabeçalhos, imagens ou títulos
de artigos. Sempre que possível, é melhor organizar seu código fonte, de modo que a sequência do DOM
forneça uma ordem lógica de tabulação. Se você usar tabindex
, restrinja-o a controles interativos personalizados,
como botões, guias, menus suspensos e campos de texto, ou seja, elementos que
o usuário pode usar para inserir entradas.
Adicione tabindex
apenas a conteúdos interativos. 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 perfeita. Por exemplo,
se você criar uma única página 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 de guias. 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, você também precisa gerenciar o foco no nível de controle, como no caso de componentes personalizados.
Por exemplo, o elemento select
pode receber foco básico, mas,
quando está lá, você pode 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.
Saber quais comportamentos do teclado implementar pode ser difícil. O guia Práticas de autoria dos Aplicativos Ricos Acessíveis de Internet (ARIA) lista os tipos de componentes e os tipos de ações do teclado que eles suportam.
Talvez você esteja trabalhando em Elementos personalizados que se parecem com um conjunto de botões de opção, mas com uma visão única de 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 a compatibilidade de teclado necessária, consulte o Guia de práticas de criação do ARIA. A seção 2 contém uma lista de padrões de design, incluindo tabela de características para grupos de rádio, o componente existente que mais se aproxima do novo elemento.
Um dos comportamentos comuns do teclado que precisa ser compatível são as teclas de seta para cima/para baixo/esquerda/direita. Para adicionar esse comportamento ao novo componente, usamos uma técnica chamada tabindex de itinerário.
O tabindex itinerante funciona definindo tabindex
como -1 para todos os filhos, exceto aquele
que está ativo atualmente.
<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 ouvinte 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 alcança o último (ou primeiro, dependendo da direção em que o foco está sendo deslocado) filho, o foco volta para o primeiro (ou último) filho.
Tente o exemplo a seguir. Inspecione o elemento no DevTools para observar o tabindex se mover de um rádio para o próximo.
Armadilhas de teclado e modais
É 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 a deixe 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, ainda é necessário evitar o uso de
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.