O que é?

A11y Avaliator é um plugin de navegador gratuito que analisa acessibilidade de sites em tempo real.

Ele executa 4 testes complementares e gera um score de 0-100 que resume a saúde geral de acessibilidade.

Funcionalidades

Análise WCAG

Detecta automaticamente violações de WCAG 2.2 usando axe-core

Cobre: ~50-70% dos problemas

⌨️ Teste de Teclado

Verifica navegação por teclado e indicadores de foco

Detecta: Keyboard traps, falta de focus visual

Teste de Leitor

Analisa semântica HTML para leitores de tela

Verifica: Labels, ARIA, estrutura semântica

Teste de Contraste

Mede contraste de cores em tempo real

Padrão: WCAG AA (4.5:1)

Score Inteligente

Calcula nota 0-100 baseada em severidade dos problemas

Multiplicadores: WCAG A/AA/AAA ponderados

Relatório Detalhado

Lista cada problema com localização e sugestões

Exportável: JSON para análise

Tecnologia

️ Stack Técnico

  • Linguagem: TypeScript + React 19
  • Build: Vite para performance
  • Testing: Vitest com 91% coverage
  • Core: @a11y/core package (reusável)

Dependências Principais

  • axe-core: Análise WCAG automática
  • Chrome MV3: Manifest v3 compliant
  • Storage API: Armazena histórico local

Privacidade

  • ✅ Nenhum dado enviado para servidor
  • ✅ Análise acontece localmente no navegador
  • ✅ Histórico salvo apenas no seu computador
  • ✅ Sem rastreamento ou analytics

Comparação: Automático vs Manual

Tipo de Teste Automático (Plugin) Manual (Teclado/Leitor)
Velocidade Segundos 15-30 min
Cobertura ~50-70% 100%
Problemas Encontrados Técnicos óbvios Experiência real
Falsos Positivos Sim, alguns Não
Curva de Aprendizado Nenhuma Moderada

Conclusão: Use o plugin para começar rapidamente, mas sempre combine com testes manuais para cobertura completa.

Limitações

O que NÃO detecta

  • Problemas de navegação por teclado interativa
  • Experiência real de usuários com deficiência
  • Qualidade de descrições de imagem (só verifica presença)
  • Fluxo de formulário confuso
  • Conteúdo muito técnico ou inacessível

O que FUNCIONA bem

  • Problemas técnicos óbvios (alt missing, low contrast)
  • Estrutura HTML semântica
  • Focusability dos elementos
  • ARIA correctness
  • Começar a jornada de acessibilidade

Para Quem é?

‍💻 Desenvolvedores

Testar durante desenvolvimento

Receber feedback imediato

Aprender boas práticas

Designers

Entender restrições de acessibilidade

Verificar contraste antes de entregar

Aprender sobre WCAG

QAs/Testers

Testar acessibilidade como parte de QA

Relatórios estruturados

Rastreamento de progresso

Product Managers

Priorizar trabalho de acessibilidade

Rastrear score ao longo do tempo

Justificar investimento em a11y

Próximos Passos

  1. Aprenda como usar o plugin
  2. Entenda cada tipo de teste
  3. Instale no seu navegador
  4. Execute primeira análise em seu site
  5. Comece a corrigir problemas

📚 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.