Visualizador de ordem de foco

Visualize a ordem de tabulação do teclado em qualquer página web

O que é ordem de tabulação?

A ordem de tabulação é a sequência que os usuários de teclado seguem ao pressionar Tab para se mover entre botões, links e campos de formulário. Uma ordem clara e previsível é essencial para usuários de leitores de tela e qualquer pessoa que navegue sem mouse. Cole seu HTML abaixo para ver marcadores numerados mostrando exatamente para onde o foco saltará.

Colar HTML

Pré-visualização

O que é Visualizador de ordem de foco?

Cole qualquer HTML e veja a ordem de tabulação do teclado mapeada. Marcadores numerados aparecem em cada elemento focável para que você identifique problemas de navegação rapidamente. Feito para auditores de acessibilidade e desenvolvedores que verificam conformidade WCAG.

Como usar

  1. Cole o código HTML no editor ou faça upload de um arquivo HTML para verificar a ordem de tabulação.
  2. Marcadores numerados aparecem em cada elemento focável (links, botões, campos de entrada) mostrando a sequência de tabulação.
  3. Revise a lista de ordem de foco, identifique elementos fora de ordem ou ausentes e exporte a análise como relatório.

Resultado

Um consultor de acessibilidade cola o HTML de um formulário de cadastro de um cliente. O visualizador revela que o botão 'Enviar' recebe foco antes da caixa de seleção 'Termos de Serviço' devido a valores incorretos de tabindex, sinalizando uma violação da WCAG 2.4.3.

Ferramentas relacionadas