Teste de Leitor de Tela

Verifica se seu conteúdo é acessível para usuários cegos e com baixa visão

O que é um Leitor de Tela?

Um leitor de tela é um programa que lê em voz alta tudo que está na tela. Para pessoas cegas ou com baixa visão, é como você usa os olhos para web. Sem um bom leitor de tela funcionando em seu site, essas pessoas simplesmente não conseguem usar.

Quem Depende Disso?

  • 1.3 bilhões com deficiência visual que poderiam usar seu site
  • 43 milhões completamente cegas
  • Pessoas com baixa visão (não cegueira total) que ampliam + usam leitor
  • Pessoas que envelhecem (visão piora naturalmente)

Leitores de Tela Populares

️ NVDA (Windows)

Gratuito, código aberto - comece por aqui

  • Mais usado por devs testando acessibilidade
  • Fácil de instalar e usar
  • Comunidade grande que ajuda
  • Baixar e testar →

VoiceOver (Mac/iOS)

Integrado no sistema

  • CMD + F5 para ativar
  • Padrão em produtos Apple
  • Avançado e poderoso
  • Usado por muitos usuários blind

JAWS (Windows)

Pago, profissional

  • Mais caro mas muito robusto
  • Padrão na indústria
  • Usado em ambientes corporativos
  • Teste de site crítico

Orca (Linux)

Gratuito, código aberto

  • Compatível com GNOME
  • Menos usado na web
  • Bom para testes em Linux
  • Suporta Braille

O que o Plugin Verifica

Semântica HTML

Verifica: Elementos HTML corretos (h1, button, nav, etc)

Problema: Se tudo é DIV, leitor não sabe o tipo de conteúdo

Exemplo:

<div onclick="...">Clique aqui</div>

Leitor dirá: "Clique aqui" (genérico)

<button>Clique aqui</button>

Leitor dirá: "Clique aqui, botão" (identifica como acionável)

️ Alternativas de Imagem

Verifica: Atributo alt em todas as imagens

Problema: Sem alt, leitor diz nada ou "imagem"

Bom: Alt descritivo e conciso

Links Descritivos

Verifica: Texto de link é descritivo

Problema: "Clique aqui" sem contexto

Bom: "Ver política de privacidade"

Labels em Formulários

Verifica: Campos de formulário têm labels associados

Problema: Campo solto, leitor não sabe o que preencher

Bom: Campo com label: "Email"

ARIA Attributes

Verifica: ARIA roles, labels, descriptions usados corretamente

Para componentes customizados: role="button", aria-label, etc

Cuidado: ARIA incorreto é pior que nenhuma ARIA

Anúncios Dinâmicos

Verifica: Conteúdo que muda é anunciado

Problema: Página carrega dados, leitor não sabe

Solução: aria-live="polite" ou aria-live="assertive"

Exemplo: Estrutura Correta

Sem Semântica (Ruim para Leitor)

<div class="header">
  <div class="nav">
    <div onclick="..." class="link">Home</div>
    <div onclick="..." class="link">Sobre</div>
  </div>
</div>
<div class="content">
  <div class="title">Bem-vindo</div>
  <div><img src="logo.png"></div>
</div>

Leitor dirá: "Bem-vindo... imagem" (perde toda a estrutura)

Com Semântica (Bom para Leitor)

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/sobre">Sobre</a>
  </nav>
</header>
<main>
  <h1>Bem-vindo</h1>
  <img src="logo.png" alt="Logo da empresa">
</main>

Leitor dirá: "Banner, navegação, links... Bem-vindo, heading 1... Logo da empresa, imagem"

Entendendo o Relatório

Exemplo do Relatório do Plugin

Problemas de semântica: 5

  • Heading (h2) usado em descrição (linha 42)
  • Botão customizado sem role="button" (linha 88)
  • 3 DIVs aninhados sem estrutura semântica

Imagens sem alt: 2

Links com texto genérico: 1 ("clique aqui")

Campos sem label: 1 (campo de email)

Próximos Passos

  1. Leia o guia completo de testes com leitor
  2. Baixe NVDA (gratuito) e pratique em seu site
  3. Use a tecla de atalho do leitor para navegar por headings, links, etc
  4. Veja exemplos de correções
  5. Rode o plugin novamente para validar

📚 Fontes e Referências

Deficiência Visual

Deficiência Auditiva

Deficiência Motora

Lei e Dados Brasileiros

Padrões, Diretrizes WCAG e links úteis

ℹ️ As estatísticas listadas nesta página são baseadas em fontes confiáveis e oficiais. Para dados mais recentes ou específicos, consulte os links de referência acima.