Implementar uma ordem lógica de tabulação é uma parte importante para oferecer aos usuários uma experiência de navegação tranquila pelo teclado. Leitores de tela e outras tecnologias assistivas navegam na página na ordem DOM. O fluxo de informações deve fazer sentido.
Como testar manualmente
Para verificar se a ordem de tabulação do seu aplicativo é lógica, tente navegar pela página. Em geral, o foco deve seguir a ordem de leitura, movendo-se da esquerda para a direita, do topo para a parte inferior da página.
Há duas ideias principais que você precisa ter em mente ao avaliar a ordem das guias:
- Os elementos do DOM estão organizados em uma ordem lógica?
- O conteúdo fora da tela está corretamente oculto da navegação?
Observe os saltos na navegação que parecem perturbadores. Observe também quaisquer saltos fora da tela, em que a tabulação leva a um conteúdo que não deveria ser visível.
Saiba mais em Conceitos básicos do acesso ao teclado.
Como corrigir
Se a ordem de foco parecer incorreta, reorganize os elementos no DOM para tornar a ordem da tabulação mais natural.
Se você usou CSS para reposicionar elementos visualmente, os usuários de tecnologia assistiva vão perceber uma navegação sem sentido. Em vez de usar CSS, mova o elemento para uma posição anterior no DOM.
Se o conteúdo fora da tela ainda puder ser acessado pelos controles do teclado,
remova-o usando tabindex="-1".
Saiba mais em Controlar foco com tabindex.
Recursos
O código-fonte da auditoria de ordem visual na página segue a ordem DOM