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.
Real-world examples
Live HTML demos for this skill — rendered directly in the page. 4 examples.
- 01
Skip link & landmarks
WCAG 2.4.1 Bypass Blocks: a visible-on-focus skip link, banner/nav/main/complementary landmarks, and a heading hierarchy that matches the reading order.
- 02
Labeled forms & error alerts
Remediation for missing labels (3.3.2) and error identification (3.3.1): visible labels, aria-invalid, aria-describedby, and role=alert suggestions on submit.
- 03
Contrast & focus indicators
Side-by-side fail/pass for 1.4.3 Contrast and 2.4.7 Focus Visible — 4.5:1 text, 3:1 UI chrome, and a 3px focus ring that is never removed.
- 04
Keyboard-safe modal
Operable custom UI (2.1.1 / 2.1.2): Tab cycles inside the dialog, Escape closes, focus returns to the opener, and prefers-reduced-motion is respected.
Skill markdown
# 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