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.
Ver a versão Pro em lote: analise até 10 URLs com deteção de outline:none e exportação CSV/provas →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.
Aviso jurídico importante
Esta ferramenta é apenas um auxílio de autoavaliação e não constitui aconselhamento jurídico nem uma avaliação de conformidade formalmente certificada. As saídas, incluindo relatórios, pontuações, listas de verificação e declarações de acessibilidade, destinam-se a uso interno e devem ser revistas por um representante jurídico qualificado ou por um auditor de acessibilidade independente antes de serem utilizadas para fins regulamentares, de aquisição ou de divulgação pública. Todo o risco da avaliação recai sobre o avaliador interno. A accessibilityref, os seus criadores e equipa não aceitam qualquer responsabilidade por perdas decorrentes da utilização ou confiança nestas saídas. Verifique sempre junto das fontes oficiais: a Recomendação W3C WCAG 2.2, o European Accessibility Act (Diretiva 2019/882), e a autoridade de fiscalização nacional aplicável.