/accessibility-review
If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.
Audit a design or page for WCAG 2.1 AA accessibility compliance.
Usage
/accessibility-review $ARGUMENTS
Audit for accessibility: @$1
WCAG 2.1 AA Quick Reference
Perceivable
-
1.1.1 Non-text content has alt text
-
1.3.1 Info and structure conveyed semantically
-
1.4.3 Contrast ratio >= 4.5:1 (normal text), >= 3:1 (large text)
-
1.4.11 Non-text contrast >= 3:1 (UI components, graphics)
Operable
-
2.1.1 All functionality available via keyboard
-
2.4.3 Logical focus order
-
2.4.7 Visible focus indicator
-
2.5.5 Touch target >= 44x44 CSS pixels
Understandable
-
3.2.1 Predictable on focus (no unexpected changes)
-
3.3.1 Error identification (describe the error)
-
3.3.2 Labels or instructions for inputs
Robust
- 4.1.2 Name, role, value for all UI components
Common Issues
-
Insufficient color contrast
-
Missing form labels
-
No keyboard access to interactive elements
-
Missing alt text on meaningful images
-
Focus traps in modals
-
Missing ARIA landmarks
-
Auto-playing media without controls
-
Time limits without extension options
Testing Approach
-
Automated scan (catches ~30% of issues)
-
Keyboard-only navigation
-
Screen reader testing (VoiceOver, NVDA)
-
Color contrast verification
-
Zoom to 200% — does layout break?
Output
Accessibility Audit: [Design/Page Name]
Standard: WCAG 2.1 AA | Date: [Date]
Summary
Issues found: [X] | Critical: [X] | Major: [X] | Minor: [X]
Findings
Perceivable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|---|---|---|---|
| 1 | [Issue] | [1.4.3 Contrast] | 🔴 Critical | [Fix] |
Operable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|---|---|---|---|
| 1 | [Issue] | [2.1.1 Keyboard] | 🟡 Major | [Fix] |
Understandable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|---|---|---|---|
| 1 | [Issue] | [3.3.2 Labels] | 🟢 Minor | [Fix] |
Robust
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|---|---|---|---|
| 1 | [Issue] | [4.1.2 Name, Role, Value] | 🟡 Major | [Fix] |
Color Contrast Check
| Element | Foreground | Background | Ratio | Required | Pass? |
|---|---|---|---|---|---|
| [Body text] | [color] | [color] | [X]:1 | 4.5:1 | ✅/❌ |
Keyboard Navigation
| Element | Tab Order | Enter/Space | Escape | Arrow Keys |
|---|---|---|---|---|
| [Element] | [Order] | [Behavior] | [Behavior] | [Behavior] |
Screen Reader
| Element | Announced As | Issue |
|---|---|---|
| [Element] | [What SR says] | [Problem if any] |
Priority Fixes
- [Critical fix] — Affects [who] and blocks [what]
- [Major fix] — Improves [what] for [who]
- [Minor fix] — Nice to have
If Connectors Available
If ~~design tool is connected:
-
Inspect color values, font sizes, and touch targets directly from Figma
-
Check component ARIA roles and keyboard behavior in the design spec
If ~~project tracker is connected:
-
Create tickets for each accessibility finding with severity and WCAG criterion
-
Link findings to existing accessibility remediation epics
Tips
-
Start with contrast and keyboard — These catch the most common and impactful issues.
-
Test with real assistive technology — My audit is a great start, but manual testing with VoiceOver/NVDA catches things I can't.
-
Prioritize by impact — Fix issues that block users first, polish later.