Visualizador de Ordem de Foco
Mapeie a sequência de tabulação por teclado, detete tabindex positivo, nomes em falta e elementos interativos não semânticos.
- 1Introduza o URL da sua página ou cole HTML — Utilize «Analisar URL» para uma página ao vivo ou «Colar HTML» para um componente. A ferramenta extrai todos os elementos interativos (ligações, botões, campos, elementos com tabindex).
- 2Ler a lista de ordem de foco — Os elementos são listados pela ordem em que um utilizador de teclado os percorreria com Tab. Cada entrada mostra o tipo de elemento, o seu nome acessível e o valor de tabindex.
- 3Detetar os problemas — Sinais a procurar: valores de tabindex positivos (tabindex='1' ou superior força uma ordem não natural — utilize apenas 0 ou -1), elementos sem nome acessível (os utilizadores de leitor de ecrã não saberão o que são) e <div> ou <span> utilizados como botões.
- 4Corrigir e verificar — Remova os valores de tabindex positivos e confie antes na ordem do DOM. Acrescente aria-label ou texto visível a elementos sem nome. Substitua os elementos interativos não semânticos por etiquetas <button> ou <a> adequadas.
Precisa de Análise de Foco em Lote?
Pro: analise até 10 URLs em simultâneo, exporte constatações completas em CSV.
Critérios WCAG Relevantes
CS 2.4.3 Ordem de Foco (A) — Os componentes focáveis têm de receber o foco por uma ordem que preserve o significado e a operabilidade.
CS 2.4.7 Foco Visível (AA) — Qualquer UI operável por teclado tem de ter um indicador de foco visível.
CS 4.1.2 Nome, Papel, Valor (A) — Todos os componentes de UI têm de ter um nome e um papel acessíveis.
Critérios complementares da WCAG 2.2 — verificação manual exigida
Esta ferramenta deteta problemas programáticos de ordem de foco. Dois critérios adicionais de Nível AA da WCAG 2.2 não podem ser detetados automaticamente e têm de ser verificados manualmente:
- CS 2.4.11 Foco Não Obscurecido (Mínimo, AA) — Quando um componente recebe foco do teclado, não pode ficar totalmente oculto por conteúdo criado pelo autor (p. ex. cabeçalhos fixos, banners de cookies).
- CS 2.4.13 Aparência do Foco (AA) — O indicador de foco tem de ter uma área mínima (perímetro × 2 px CSS) e um rácio de contraste de pelo menos 3:1 entre estados com e sem foco.
Important Legal Disclaimer
This tool is a self-assessment aid only and does not constitute legal advice or a formally certified compliance assessment. Outputs — including reports, scores, checklists, and accessibility statements — are for internal use and should be reviewed by a qualified legal representative or independent accessibility auditor before being relied upon for regulatory, procurement, or public-disclosure purposes. All assessment risk lies with the internal assessor. accessibilityref, its developers, and staff accept zero liability for losses arising from use of or reliance on these outputs. Always verify against official sources: the W3C WCAG 2.2 Recommendation, the European Accessibility Act (Directive 2019/882), and your national enforcement authority.