Uma ordem lógica de tabulação é importante para que os usuários tenham uma experiência tranquila com o teclado. Leitores de tela e outras tecnologias assistivas navegam pela página na ordem DOM. O fluxo de informações precisa fazer sentido.
Como testar manualmente
Para verificar se a ordem de tabulação do aplicativo é lógica, tente navegar pela página. Em geral, o foco precisa seguir a ordem de leitura, de cima para baixo na página. Na maioria dos idiomas, a ordem de leitura se move da esquerda para a direita. Em alguns, como o árabe e o hebraico, a ordem de leitura é da direita para a esquerda.
Há duas ideias principais que você deve ter em mente ao avaliar a ordem de tabulação:
- Os elementos no DOM estão organizados em uma ordem lógica?
- O conteúdo fora da tela está oculto corretamente da navegação?
Observe quaisquer saltos na navegação que pareçam desagradáveis. Além disso, observe os saltos fora da tela, em que a tecla Tab leva você a um conteúdo que não deveria ser visível.
Saiba mais em Noções básicas de acesso por teclado.
Como corrigir
Se a ordem de foco estiver errada, reorganize os elementos no DOM para tornar a ordem de tabulação mais natural.
Evite usar CSS para reposicionar visualmente elementos, porque os usuários de tecnologias adaptativas vão ter 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 estiver acessível aos controles do teclado,
remova-o usando tabindex="-1".
Saiba mais em Controlar o foco com tabindex.
Recursos
O código-fonte da auditoria de ordem visual na página segue a ordem do DOM