🦮 Wally Accessibility Linter

Seu parceiro para desenvolvimento acessível - Análise WCAG em tempo real enquanto você desenvolve.

🚀 Versão 1.0.0 - Extensão completa para VS Code com análise em tempo real, Quick Fixes e Snippets!

🌟 Funcionalidades

⚡ Análise em Tempo Real

• Detecta problemas de acessibilidade enquanto você digita
• Motor axe-core da Deque (mesmo usado pelo Google, Microsoft e Facebook)
• Suporte para HTML, JSX, TSX, Vue, PHP, EJS, Handlebars e mais

🎨 Experiência Visual Completa

• ✅ Sublinhados coloridos no código (por severidade)
• ✅ Problems Panel integrado ao VS Code
• ✅ Hover tooltips com explicações detalhadas
• ✅ Painel lateral estilo Wally Chrome Extension

🔧 Correções Inteligentes (Quick Fixes)

• Adiciona alt automaticamente em imagens
• Sugere aria-label para botões sem texto
• Corrige estruturas de headings
• E muito mais...

📊 Score de Acessibilidade

• Veja o score do arquivo atual na Status Bar
• Score do projeto completo disponível
• Filtros por severidade (Crítico, Sério, Moderado, Leve)

📝 Snippets Prontos

• a11y-img → Imagem acessível
• a11y-button → Botão acessível
• a11y-form → Formulário completo acessível
• E dezenas de outros...

🚀 Início Rápido

Instalação para Desenvolvimento

# Clone o repositório
git clone https://github.com/brunoduarte40/wally-accessibility-linter.git
cd wally-accessibility-linter

# Instale dependências
npm install

# Compile TypeScript
npm run compile

# Abra no VS Code
code .

# Pressione F5 para testar!

Instalação via Marketplace (quando publicado)

1. Abra VS Code
2. Vá para Extensions (Ctrl+Shift+X)
3. Busque "Wally Accessibility Linter"
4. Clique em Install

Como Usar

1. Abra qualquer arquivo HTML/JSX/Vue
2. Problemas aparecem automaticamente (sublinhados coloridos)
3. Passe o mouse para ver explicação detalhada
4. Clique na lâmpada 💡 para correções automáticas
5. Digite a11y- para usar snippets prontos

Comandos Disponíveis

• Wally: Analisar Acessibilidade do Arquivo - Força análise do arquivo atual
• Wally: Mostrar Painel de Acessibilidade - Abre painel lateral completo
• Wally: Analisar Todos os Arquivos do Projeto - Análise completa do workspace
• Wally: Limpar Problemas de Acessibilidade - Remove diagnósticos

⚙️ Configurações

Acesse File > Preferences > Settings e busque por "Wally":

{
  "wally.enabled": true,
  "wally.realTimeAnalysis": true,
  "wally.wcagLevel": "AA",
  "wally.severityLevels": ["critical", "serious", "moderate", "minor"],
  "wally.showScoreInStatusBar": true,
  "wally.autoFix": true
}

Níveis WCAG Suportados

• A - Requisitos básicos
• AA - Padrão recomendado (default)
• AAA - Conformidade máxima

Severidades

• 🔴 Crítico - Impede uso por pessoas com deficiência
• 🟠 Sério - Problemas significativos
• 🟡 Moderado - Dificuldades na experiência
• 🟢 Leve - Melhorias recomendadas

📖 Documentação Completa

Cada problema exibe:

• ✅ Descrição clara do problema
• ✅ Impacto (quem é afetado)
• ✅ Como corrigir
• ✅ Exemplo de código correto
• ✅ Link para documentação WCAG

🎯 Exemplo

<!-- ❌ Problema detectado -->
<img src="https://github.com/brunoduarte40/wally-accessibility-linter/raw/HEAD/logo.png">

<!-- 💡 Quick Fix sugerido -->
<img src="https://github.com/brunoduarte40/wally-accessibility-linter/raw/HEAD/logo.png" alt="Logo da Empresa">

📚 Documentação Completa

• 📖 Guia de Início Rápido
• 🧪 Como Testar
• 📦 Como Publicar
• 📋 Guia de Regras WCAG
• 🔄 Chrome vs VS Code
• 📊 Resumo Executivo

🤝 Contribua

Contribuições são muito bem-vindas!

1. Fork o projeto
2. Crie uma branch (git checkout -b feature/MinhaFeature)
3. Commit suas mudanças (git commit -m 'feat: Adiciona MinhaFeature')
4. Push para a branch (git push origin feature/MinhaFeature)
5. Abra um Pull Request

🐛 Reportar Bugs

Encontrou um bug? Abra uma issue

📞 Contato

• GitHub: @brunoduarte40
• Email: brunoduarte40@gmail.com
• Baseado em: Wally Chrome Extension

📝 Licença

MIT License - Use livremente! Veja LICENSE para mais detalhes.

🙏 Agradecimentos

• axe-core pela excelente biblioteca de análise
• Deque University pelos recursos educacionais
• Comunidade WCAG pelas diretrizes
• VS Code Team pela incrível API

⭐ Gostou? Dê uma estrela no GitHub e compartilhe com sua equipe!

Desenvolvido com ❤️ e acessibilidade em mente!