A ordem visual da página segue a ordem DOM

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.

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