A ordem de tabulação padrão fornecida pela posição DOM dos elementos HTML semânticos é
conveniente, mas pode haver momentos em que você precisa modificar a ordem da tabulação. Transporte
no HTML é o ideal, mas isso pode não ser viável. Nesses casos,
pode usar o atributo HTML tabindex para definir explicitamente a guia de um elemento.
posição
tabindex pode ser aplicado a qualquer elemento, embora não seja necessariamente
útil em cada elemento e aceita 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 focada 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.
Isso é particularmente verdadeiro para elementos não de entrada, como cabeçalhos, imagens ou artigos
títulos. Quando possível, é melhor organizar seu código-fonte de forma que a sequência DOM forneça uma
ordem lógica da tabulação. Se você usar tabindex, restrinja a interação personalizada personalizada
controles, como botões, guias, menus suspensos e campos de texto; ou seja, elementos que
que um usuário pode esperar
fornecer informações.
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ê-lo sem
adicionando foco.
Gerenciar o foco no nível da página
Às vezes, 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, quando não
todo o conteúdo fica visível simultaneamente. Isso pode significar links de navegação
alterar o conteúdo visível, sem uma atualização de página.
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 componentes personalizados.
Por exemplo, o elemento select pode receber foco básico, mas uma vez
é possível usar as teclas de seta para exibir mais opções selecionáveis.
Se você criar um elemento select personalizado, é importante replicá-lo.
para que os usuários do teclado ainda possam interagir com seu controle.
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.
Talvez você esteja trabalhando em Elementos personalizados que parecem um conjunto de botões de opção, mas com sua visão única de do seu modelo.
<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, verifique o Práticas de criação ARIA guia. A seção 2 contém uma lista de padrões de design, incluindo tabela de características para rádio grupos, o componente existente que melhor corresponde ao novo elemento.
Um dos comportamentos comuns de teclado que deve ser com suporte são as teclas de seta para cima/para baixo/para a esquerda/direita. Para adicionar esse comportamento ao novo usamos uma técnica chamada tabindex itinerante.
O tabindex itinerante funciona definindo tabindex como -1 para todos os filhos, exceto o
ativo 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 eventos de teclado para determinar qual tecla a
pressionamentos do usuário; quando isso acontece, ele define
tabindex como -1, define o tabindex da criança a ser focada como 0 e chama
método de foco.
<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 ao último (ou primeiro, dependendo da direção em que está) movendo o foco), o foco volta para o primeiro (ou o último) criança.
Teste o exemplo a seguir. Inspecione o elemento no DevTools para observar o tabindex se mover de um rádio para outro.
Armadilhas modais e de teclado
É melhor evitar gerenciar o foco manualmente, já que isso pode levar a situações complicadas. Por exemplo, um widget de preenchimento automático que tenta gerenciar o foco e captura comportamento da guia, mas impede que o usuário a deixe até que seja concluída. Isso é chamado de armadilha do teclado e pode ser muito frustrante para o usuário.
A seção 2.1.2 das WCAG afirma que o foco do teclado nunca deve ser bloqueado ou presos em um elemento de página específico. O usuário deve ser capaz de navegar de e para todos os elementos da página usando apenas o teclado.
A exceção a essa regra são os modais. Porém, você ainda deve evitar o uso
tabindex ao criar um modal. Com o inert, você pode:
garantir que os usuários não possam interagir acidentalmente com um elemento (uma ação
armadilha de teclado). Usar o <dialog>
que é inerte por padrão para criar um modal para os usuários e, ao mesmo tempo, bloquear
cliques e guias fora do modal. Isso permite que o usuário se concentre em uma
seleção necessária.