O que wcag-audit-patterns faz?
Realize auditorias de acessibilidade conforme WCAG 2.2 com testes automatizados, verificação manual e orientações de correção. Use ao auditar sites quanto à acessibilidade, corrigir violações WCAG ou implementar padrões de design acessíveis.
Visão Geral
Este skill permite que o agente conduza auditorias de acessibilidade web sistemáticas, seguindo as diretrizes WCAG 2.2 nos níveis A, AA e AAA. Ele integra ferramentas de teste automatizado com processos de verificação manual para garantir uma cobertura abrangente.
Funcionalidades
- Testes Automatizados: Executa ferramentas como
axe-core,Lighthouseoupa11ypara detectar violações comuns de acessibilidade. - Verificação Manual: Guia o usuário através de checklists manuais para testar navegação por teclado, foco visível, ordem de leitura e outros critérios não automatizáveis.
- Orientação de Correção: Fornece explicações claras e exemplos de código corrigido para cada violação encontrada.
- Padrões de Design Acessíveis: Oferece componentes e padrões prontos para uso (modais, menus, formulários) que seguem as melhores práticas de acessibilidade.
Como Usar
- Iniciar Auditoria: Solicite ao agente: "Execute uma auditoria WCAG 2.2 neste site [URL]".
- Revisar Resultados: O agente apresentará uma lista de violações categorizadas por critério de sucesso.
- Corrigir Problemas: Peça correções específicas: "Corrija o contraste de cor no botão de envio" ou "Adicione rótulos ARIA aos elementos de navegação".
- Gerar Relatório: Solicite um relatório resumido em formato acessível.
Exemplo de Uso
Usuário: Audite a página de login em https://exemplo.com/login quanto à acessibilidade AA.
Agente: Executando auditoria automatizada... [resultados]
Violações encontradas:
1. Contraste de cor insuficiente no texto do botão (ratio 3.2:1, necessário 4.5:1)
2. Campo de senha sem label associada
Deseja que eu corrija esses problemas?
Compatibilidade
- Plataformas: Claude Code, Cursor, Codex
- Ferramentas: axe-core, Lighthouse, pa11y
- Linguagens: HTML, CSS, JavaScript, React, Vue, Angular
Notas
- Sempre valide as correções manualmente após as alterações automáticas.
- Para sites com muitos elementos dinâmicos, recomenda-se uma auditoria manual complementar.
Skill mantido por wshobson. Para contribuições, consulte o repositório original.