Como Usar o A11y Avaliator

Guia passo-a-passo para instalar e usar o plugin

Passo 1: Instalar o Plugin

Chrome/Edge/Brave

  1. Visite Chrome Web Store
  2. Procure por "A11y Avaliator"
  3. Clique em "Adicionar ao Chrome"
  4. Confirme permissões (activeTab, storage, scripting)
  5. Pronto! Ícone aparece na barra de ferramentas

Passo 2: Abrir o Plugin

Primeiro uso

  1. ✅ Navegue até o site que quer analisar
  2. ✅ Clique no ícone do A11y Avaliator na barra de ferramentas
  3. ✅ Uma janela popup será aberta
  4. ✅ Você verá o painel de controle com opções

💡 Dica: Fixe o ícone na barra para acesso mais rápido. Clique direito no ícone → "Fixar na barra"

Passo 3: Escolher Testes

No painel, você verá 4 checkboxes para cada tipo de teste:

Análise WCAG

Detecta violações de WCAG automaticamente (recomendado sempre ativar)

⌨️ Teste de Teclado

Verifica navegação por teclado (mais lento, pode aumentar tempo de análise)

Teste de Leitor

Analisa semântica para leitores de tela

Teste de Contraste

Verifica contraste de cores (pode ser lento em páginas grandes)

🎯 Recomendação para Iniciantes:

Ative apenas WCAG + Contraste no começo. São rápidos e cobrem a maioria dos problemas.

Depois que corrigir esses, ative Teclado + Leitor para testes mais profundos.

Passo 4: Executar Análise

1. Clique "Analisar" ou "Iniciar Análise"

O plugin começará a executar os testes selecionados

Você verá uma barra de progresso

2. Aguarde conclusão

Tempo típico: 5-30 segundos dependendo do tamanho da página

NÃO feche o popup ou mude de aba durante a análise

3. Veja o Resultado

✅ Score: 0-100 resumo da saúde geral

📊 Breakdown: Quantos problemas por tipo

📋 Lista de Problemas: Clique para expandir cada um

Passo 5: Entender o Relatório

Score Geral (Grande número topo)

De 0-100, onde:

  • 🟢 90-100 = Excelente
  • 🔵 80-89 = Bom
  • 🟡 70-79 = Aceitável
  • 🟠 50-69 = Precisa Melhorar
  • 🔴 0-49 = Crítico

Breakdown de Problemas

Visualização de quantos problemas cada tipo encontrou:

  • Critical: Impacto máximo
  • Serious: Muito importante
  • Moderate: Importante
  • Minor: Polimento

Lista de Problemas

Cada problema mostra:

  • Tipo (WCAG/Teclado/Leitor/Contraste)
  • Severidade (Critical/Serious/etc)
  • Descrição do problema
  • Localização (linha/elemento)
  • Sugestão de correção

Passo 6: Corrigir Problemas

  1. Comece pelos Críticos

    Clique para expandir problemas "Critical"

    Esses têm maior impacto no score

  2. Consulte o Guia de Correções

    Use guia de correções práticas como referência

    Cada tipo de problema tem exemplos de código

  3. Implemente a Correção

    Modifique seu código HTML/CSS/JS baseado na sugestão

  4. Teste Novamente

    Volte ao popup e clique "Analisar" novamente

    O score deve melhorar se a correção funcionou

  5. Repita

    Continue até atingir seu objetivo (ex: 80+)

Recursos Adicionais

Histórico

Plugin salva histórico das últimas análises

Veja progresso ao longo do tempo

Exportar Relatório

Salve resultado como JSON

Compartilhe com equipe ou stakeholders

️ Configurações

Customize níveis WCAG padrão

Ajuste sensibilidade dos testes

Suporte

Botão "?" abre documentação

Link para reporte de bugs

Próximos Passos

  1. Instale o plugin no seu navegador
  2. Abra seu site
  3. Execute primeira análise (WCAG + Contraste)
  4. Leia o score e veja onde está agora
  5. Consulte guia de correções
  6. Implemente correções dos problemas críticos
  7. Teste novamente para validar progresso

Dúvidas Frequentes

Veja página de FAQ para respostas a perguntas comuns sobre como usar o plugin.