Design e UI
Padrões de auditoria de acessibilidade WCAG 2.2
Orienta auditorias WCAG 2.2 com testes automatizados, verificação manual e recomendações para corrigir barreiras de acessibilidade.
Ver código no GitHub Instala diretamente do repositório-fonte.
O que esta skill faz
A skill organiza a avaliação pelos princípios perceptível, operável, compreensível e robusto, considerando níveis A, AA e AAA. Ela destaca problemas comuns de teclado, imagens, formulários, contraste, estrutura e mídia.
Quando usar
- Auditar uma interface contra WCAG 2.2
- Corrigir navegação inacessível por teclado
- Revisar labels, alt text e hierarquia de títulos
- Implementar componentes acessíveis
- Preparar orientações de remediação
Como usar
- Defina páginas, fluxos e nível de conformidade desejado
- Revise o repositório e identifique componentes compartilhados
- Execute testes automatizados e registre ocorrências
- Faça verificação manual, inclusive por teclado e tecnologia assistiva
- Priorize correções e valide novamente os fluxos afetados
O que revisar antes de instalar
- Testes automatizados não cobrem todos os critérios WCAG
- Conformidade técnica não garante uma experiência perfeita para todas as pessoas
- A skill fornece orientação, não certificação jurídica ou regulatória
- Requisitos detalhados adicionais dependem do arquivo de referência citado
SKILL.md
--- name: wcag-audit-patterns description: Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns. --- # WCAG Audit Patterns Comprehensive guide to auditing web content against WCAG 2.2 guidelines with actionable remediation strategies. ## When to Use This Skill - Conducting accessibility audits - Fixing WCAG violations - Implementing accessible components - Preparing for accessibility lawsuits - Meeting ADA/Section 508 requirements - Achieving VPAT compliance ## Core Concepts ### 1. WCAG Conformance Levels | Level | Description | Required For | | ------- | ---------------------- | ----------------- | | **A** | Minimum accessibility | Legal baseline | | **AA** | Standard conformance | Most regulations | | **AAA** | Enhanced accessibility | Specialized needs | ### 2. POUR Principles ``` Perceivable: Can users perceive the content? Operable: Can users operate the interface? Understandable: Can users understand the content? Robust: Does it work with assistive tech? ``` ### 3. Common Violations by Impact ``` Critical (Blockers): ├── Missing alt text for functional images ├── No keyboard access to interactive elements ├── Missing form labels └── Auto-playing media without controls Serious: ├── Insufficient color contrast ├── Missing skip links ├── Inaccessible custom widgets └── Missing page titles Moderate: ├── Missing language attribute ├── Unclear link text ├── Missing landmarks └── Improper heading hierarchy ``` ## Detailed patterns and worked examples Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient. ## Best Practices ### Do's - **Start early** - Accessibility from design phase - **Test with real users** - Disabled users provide best feedback - **Automate what you can** - 30-50% issues detectable - **Use semantic HTML** - Reduces ARIA needs - **Document patterns** - Build accessible component library ### Don'ts - **Don't rely only on automated testing** - Manual testing required - **Don't use ARIA as first solution** - Native HTML first - **Don't hide focus outlines** - Keyboard users need them - **Don't disable zoom** - Users need to resize - **Don't use color alone** - Multiple indicators needed