1️⃣ Imagens Sem Alt

O Problema: Leitores de tela não conseguem descrever a imagem

Como Detectar: Plugin mostra "Image without alt text"

Impacto: 🔴 Crítico para usuários cegos

Frequência: Em ~85% dos sites

Ver Correção →

2️⃣ Contraste Insuficiente

O Problema: Texto cinzento em branco é ilegível para baixa visão

Como Detectar: Plugin relata razão de contraste < 4.5:1

Impacto: 🟠 Grave para pessoas com baixa visão

Frequência: Em ~70% dos sites

Ver Correção →

3️⃣ Links Sem Descrição

O Problema: Links "Clique aqui" ou "Leia mais" sem contexto

Como Detectar: Plugin lista links genéricos

Impacto: 🟠 Grave para leitores de tela

Frequência: Em ~60% dos sites

Ver Correção →

4️⃣ Campos Sem Labels

O Problema: Campo de input solto, sem label associado

Como Detectar: Plugin mostra "form input without label"

Impacto: 🟠 Grave para teclado + leitor

Frequência: Em ~50% dos sites

Ver Correção →

5️⃣ Sem Indicador de Focus

O Problema: Elemento selecionado não mostra visualmente

Como Detectar: Tab pelo site, elemento não destaca

Impacto: 🟠 Grave para navegação por teclado

Frequência: Em ~55% dos sites

Ver Correção →

6️⃣ Estrutura de Headings Confusa

O Problema: H1 → H3 (pula H2), ou múltiplos H1s

Como Detectar: Plugin detecta orden incorreta

Impacto: 🟡 Moderado para leitura de tela

Frequência: Em ~40% dos sites

Ver Correção →

7️⃣ Botões Customizados Sem Semântica

O Problema: DIV com onclick em vez de button

Como Detectar: "Clique aqui" genérico, não ativa com Enter

Impacto: 🔴 Crítico para teclado + leitor

Frequência: Em ~45% dos sites

Ver Correção →

8️⃣ Formulários Sem Validação Clara

O Problema: Erro aparece mas não é anunciado

Como Detectar: Campo inválido, nenhuma mensagem acessível

Impacto: 🟡 Moderado para preenchimento

Frequência: Em ~35% dos sites

Ver Correção →

9️⃣ Iframes Sem Título

O Problema: Iframe sem title/aria-label

Como Detectar: Leitor de tela não sabe o que é o iframe

Impacto: 🟡 Moderado para leitura

Frequência: Em ~25% dos sites

Ver Correção →

Vídeos Sem Legendas

O Problema: Vídeo só com áudio, sem subtítulos

Como Detectar: Plugin relata "video without captions"

Impacto: 🔴 Crítico para surdos

Frequência: Em ~80% dos sites com vídeo

Ver Correção →

Padrão de Problemas

Problemas de Design

  • Contraste baixo (culpa do designer)
  • Sem espaçamento suficiente entre elementos
  • Tamanho de fonte muito pequeno
  • Cores como única forma de informar

Problemas de Desenvolvimento

  • HTML semântico não usado
  • Elementos interativos mal estruturados
  • Falta de ARIA onde necessário
  • JavaScript quebra acessibilidade

Problemas de Conteúdo

  • Alt text genérico ("imagem", "foto")
  • Links sem contexto
  • Texto jargonado demais
  • Instruções pouco claras

Quick Fix: Os 3 Problemas Mais Rápidos de Corrigir

1. Adicionar Alt Text em Imagens

Tempo: 5-10 minutos por página

Impacto: 🔴 Crítico no score

<img src="photo.jpg" alt="Descrição clara">

2. Escurecer Texto para Melhor Contraste

Tempo: 2-5 minutos

Impacto: 🟠 Muda muitos elementos

.text { color: #333; } /* melhor que #999 */

3. Adicionar Focus Outline

Tempo: 1-2 minutos

Impacto: 🟡 Importante para teclado

button:focus { outline: 2px solid #0066cc; }

Próximos Passos

  1. Execute o plugin em seu site
  2. Identifique quais desses 10 erros aparecem
  3. Comece pelos 3 mais frequentes
  4. Consulte guia de correções para código exato
  5. Implemente uma correção por vez
  6. Teste com o plugin 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.