Visualizador de ordem de foco

O que é Visualizador de ordem de foco?

Este visualizador de ordem de foco ajuda auditores de acessibilidade e desenvolvedores a ver a ordem de tabulação do teclado em qualquer página HTML. Cole seu HTML ou insira o código-fonte de uma URL, e a ferramenta sobrepõe marcadores numerados em cada elemento focável mostrando a sequência exata de tabulação — facilitando a identificação de problemas de navegação.

Como usar

1. Cole o código HTML no editor ou faça upload de um arquivo HTML que deseja analisar quanto à ordem de tabulação.
2. Visualize a página renderizada com marcadores numerados sobrepostos mostrando a sequência de tabulação de cada elemento focável (links, botões, campos de entrada, etc.).
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