O que é Pré-visualização de leitor de tela?

A Pré-visualização de Leitor de Tela mostra como a tecnologia assistiva interpreta seu conteúdo HTML. Expõe o nome acessível, a função e a ordem de leitura de cada elemento, para que você detecte rótulos ausentes, estrutura de títulos quebrada e problemas de ARIA antes que os usuários reais os encontrem.

A ferramenta analisa seu HTML do mesmo jeito que um leitor de tela monta a árvore de acessibilidade: descarta o layout visual, resolve aria-label e aria-labelledby, pega o alt das imagens e achata o resultado em uma sequência linear de leitura. O painel de problemas marca links sem nome acessível, saltos de nível em títulos, imagens sem alt e campos de formulário sem rótulo.

Como usar

1. Cole seu conteúdo HTML ou insira uma URL para análise.
2. Revise a ordem de leitura linearizada e a árvore de acessibilidade dos elementos.
3. Corrija os problemas identificados e teste novamente até que o fluxo de leitura esteja claro.

Quando usar

• Antes de subir uma landing que precisa passar numa auditoria WCAG AA.
• Investigar por que um usuário de NVDA ou VoiceOver reclamou de um menu confuso.
• Revisar o HTML de um widget de terceiros após uma atualização para flagrar regressões de acessibilidade.

Resultado

Um desenvolvedor cola um menu de navegação. A ferramenta revela que 3 links não possuem nomes acessíveis e que a hierarquia de títulos pula de h1 para h4, causando confusão para usuários de leitores de tela.

Perguntas frequentes

Isto substitui testar com um leitor de tela real?

Não. NVDA, JAWS e VoiceOver têm cada um suas manias em como anunciam regiões live, cabeçalhos de tabela e conteúdo dinâmico. Use a ferramenta para pegar os problemas óbvios (rótulos faltando, ordem de títulos quebrada) antes de gastar tempo dentro de um leitor real.

Por que meu ícone decorativo aparece como problema?

Leitores de tela anunciam toda img por padrão. Se o ícone é puramente decorativo, coloque alt vazio e aria-hidden="true", e a ferramenta o pula na ordem de leitura. Não use alt=ícone ou alt=decoração, é pior do que nada.

Qual é a ordem certa dos títulos?

Exatamente um h1 por página e nunca pule níveis ao descer (h2 não pode ser seguido por h4). Subir está ok. Usuários de leitor de tela navegam saltando entre títulos, então uma hierarquia quebrada deixa a página parecendo labirinto.

Todo elemento interativo precisa de aria-label?

Não. Botão com texto visível não precisa de aria-label, o texto vira o nome acessível automaticamente. Use aria-label só quando não há texto visível (botões só de ícone) ou quando o texto não é descritivo (uma fileira de Leia mais).

Posso colar uma página inteira?

Sim, cole o HTML completo. A ferramenta ignora scripts, estilos e meta tags e foca no body do documento. Em páginas enormes, vale ir por seção para a lista de problemas continuar legível.

Ferramentas relacionadas