WCAG Audit Patterns
/SKILLComprehensive guide to auditing web content against WCAG 2.2 guidelines with actionable remediation strategies.
--- name: wcag-audit-patterns description: Conduct WCAG 2.2 accessibility audits using automated testing, manual verification, and remediation guidance. Use this 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 - Incorporate accessibility from the design phase - Test with real users - Users with disabilities provide the best feedback - Automate what you can - 30:50% of issues can be detected - Use semantic HTML - Reduces the need for ARIA - Document patterns - Build an accessible component library ### Don’ts - Don’t rely solely on automated testing - Manual testing is required - Don’t use ARIA as the first solution:Prioritize native HTML - Don’t hide focus outlines:Keyboard users need them - Don’t disable zoom:Users need to resize - Don’t rely on color alone:Multiple indicators are needed
