| name | wcag-compliance |
| description | Use this skill when verifying WCAG 2.1/3.0 compliance, mapping accessibility violations to specific criteria, or providing remediation guidance with code examples |
| user-invocable | false |
WCAG Compliance
Deep accessibility compliance guidance for WCAG 2.1 (compliance-focused) and WCAG 3.0 (outcome-focused) standards.
When to Use
Use this skill when:
- Auditing for WCAG 2.1 or WCAG 3.0 compliance
- Mapping findings to specific WCAG criteria
- Providing remediation guidance with code examples
- Testing accessibility fixes
- Explaining user impact and accommodation needs
Reference Materials
This skill includes comprehensive reference documentation:
- wcag-2.2-complete-criteria.md — All 78 WCAG 2.2 success criteria organized by level (A, AA, AAA) with common issues and remediation guidance
- wcag-3.0-outcomes-framework.md — Outcome-focused accessibility framework, paradigm shift from WCAG 2.1, audit workflow, and remediation patterns
- aria-patterns-reference.md — 13 essential ARIA patterns with code examples, keyboard support, and screen reader behavior
- A11Y-PATTERNS.md — Copy-paste-ready accessibility code patterns (modal focus trap, skip link, error handling, form labels, dragging movements, tabs, live regions, screen reader commands)
WCAG 2.1 vs WCAG 3.0: Paradigm Shift
WCAG 2.1 (Compliance-Focused): Binary pass/fail against specific technical criteria. Levels: A (minimum), AA (standard), AAA (enhanced).
WCAG 3.0 (Outcome-Focused): Outcome-centered goals focusing on user ability. Four dimensions: Perceivable, Operable, Understandable, Robust.
See → wcag-3.0-outcomes-framework.md for detailed comparison, paradigm differences, and outcome-focused audit workflow.
Quick Start: 3-Phase Accessibility Workflow
Phase 1: Scan & Analyze
- Run automated tools (axe, WAVE, Lighthouse, Pa11y)
- Conduct keyboard navigation and screen reader testing
- Map findings to WCAG criteria
- Prioritize: Critical (blocks) > High > Medium > Low
Phase 2: Remediate
For each finding:
- Map to WCAG criterion (e.g., "1.4.3 Contrast Level AA")
- Provide code fix with before/after
- Explain user impact (which disabilities affected)
- Suggest testing steps
Phase 3: Verify
- Test keyboard navigation (Tab, Shift+Tab, Enter, Space)
- Test with screen readers (NVDA, JAWS, VoiceOver)
- Verify contrast ratios (4.5:1 normal, 3:1 large, 3:1 UI elements)
- Test at 200% zoom
- Validate semantic HTML and ARIA patterns
See → wcag-2.2-complete-criteria.md for all 78 WCAG 2.2 criteria with common issues and severity mapping.
Code Patterns & ARIA
For accessible code implementations, refer to:
- aria-patterns-reference.md — 13 patterns: buttons, forms, tabs, modals, menus, live regions with full code and keyboard support
- A11Y-PATTERNS.md — Copy-paste patterns: modal focus trap, skip links, error handling, form labels, ARIA tabs
Testing Tools & Assistive Technologies
Automated Testing
- axe DevTools (browser extension, good for CI)
- WAVE (visual feedback on page)
- Lighthouse (Chrome DevTools)
- Pa11y (CLI, scriptable)
Manual Testing & Screen Readers
- Keyboard: Tab, Shift+Tab, Enter, Space, Arrow keys
- NVDA (Windows): Insert+Down (read), Tab (navigate), Insert+H (help)
- JAWS (Windows): Insert+Down (read), Insert+Z (browse/forms mode)
- VoiceOver (Mac): Cmd+F5 (start), VO+Right/Left (navigate)
- Voice Control: "Click [element]", "Press [button]", "Show numbers"
- Contrast: WebAIM Contrast Checker, Color Oracle (color blindness)
Best Practices
Prioritization Matrix
- Critical: Blocks task completion (form won't submit, can't navigate)
- High: Significantly impacts UX (button not keyboard accessible, no focus indicator)
- Medium: Noticeable but workaround exists (low contrast on secondary text, missing alt on decorative image)
- Low: Polish/refinement (improved ARIA labeling, consistency improvements)
WCAG Levels
- Level A: Minimum (rarely sufficient for public products)
- Level AA: Industry standard (target for most products) — 4.5:1 contrast, keyboard accessible, semantic HTML
- Level AAA: Enhanced (specialized/high-stakes) — 7:1 contrast, extensive testing with AT and real users
Common Pitfalls
- Relying only on automated tools (~30% of issues missed)
- Fixing only critical issues (medium issues compound)
- Testing with one screen reader only (behavior varies)
- Forgetting keyboard-only users (not all AT uses screen readers)
- Assuming contrast is sufficient (also need semantic meaning)
- Not testing with real users with disabilities
Assessment Framework
For WCAG 3.0 outcome-focused approach:
- User Outcome at Risk: What can the user NOT do?
- Disability Impact: How are specific disabilities affected?
- Remediation: What change restores the outcome?
- Verification: How do we verify outcome is achieved?
See → wcag-3.0-outcomes-framework.md for assessment template and outcome-focused remediation patterns.
External Resources
