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.

O visualizador detecta links, botões, campos de formulário, textareas, menus select, componentes details/summary, áreas contenteditable e qualquer elemento com tabindex explícito. Cada elemento focável recebe um badge numerado e um marcador indicando se a posição vem da ordem do DOM (natural) ou de um tabindex que a sobrescreve (customizada). Ele também dá uma pontuação de 0 a 100 à página, aponta os controles sem nome acessível (o problema do botão só com ícone) e mostra quantos elementos interativos nunca ficam acessíveis por Tab. Exporte os resultados como relatório em texto puro ou como CSV estruturado para registros de auditoria e rastreadores de bugs.

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. Veja a pontuação de acessibilidade e o painel de problemas, corrija os elementos fora de ordem, sem rótulo ou inacessíveis por teclado e exporte os resultados como relatório de texto ou CSV.

Quando usar

• Verificação prévia antes de submeter uma página para certificação WCAG 2.1 AA.
• Encontrar uma regressão de ordem de tabulação após refatorar um componente.
• Validar se um modal ou menu lateral prende o foco onde deveria.

Resultado

Um consultor de acessibilidade cola o HTML de um formulário de cadastro de um cliente. O visualizador percebe que o botão 'Enviar' recebe foco antes da caixa 'Termos de Serviço', porque um tabindex positivo reordenou os elementos. Isso é uma violação da WCAG 2.4.3.

Perguntas frequentes

Usar tabindex com número positivo está sempre errado?

Quase sempre. Tabindex positivo (1, 2, 3…) tira o elemento da ordem do DOM e faz o cursor pular pela página de forma imprevisível. Use tabindex="0" para tornar focável um elemento não interativo, ou tabindex="-1" para tirá-lo da cadeia de Tab mantendo o foco programático.

O que significam «natural» e «customizado» na lista?

Natural quer dizer que a posição Tab vem de onde o elemento está no código HTML. Customizado significa que um tabindex positivo forçou outra posição. Posições customizadas são marcadas porque costumam ser a causa de falhas WCAG 2.4.3.

Elementos ocultos aparecem na ordem de foco?

Se estão realmente ocultos (display:none ou visibility:hidden), o navegador os pula e o visualizador também. Mas aria-hidden sozinho não remove a focabilidade, e isso é um bug comum. A lista mostra esses elementos e os dados do retângulo dizem se estão visíveis.

A ferramenta detecta falta de focus trap em modais?

Ela mostra a ordem, não se o foco escapa do modal. Cole o HTML do modal aberto e veja se o primeiro e o último elemento focáveis estão dentro do diálogo. Se a ordem pula para o conteúdo do body, falta o focus trap.

Por que está faltando na lista um elemento que eu esperava focável?

Inputs desabilitados, anchors sem href e divs sem tabindex são ignorados porque o navegador não consegue focá-los. Adicione tabindex="0" se um div precisa ser alcançável, coloque href no anchor ou remova o atributo disabled.

Ferramentas relacionadas