| name | accessibility-review |
| description | Audit designs and code for WCAG 2.1 AA compliance. Trigger with "is this accessible", "accessibility check", "WCAG audit", "can screen readers use this", "color contrast", or when the user asks about making designs or code accessible to all users. |
| when_to_use | Auditing a design or code for WCAG 2.1 AA compliance; checking color contrast, keyboard access, or screen reader support; reviewing ARIA landmarks, focus order, or touch targets |
| allowed-tools | Read, Glob, Grep, Bash |
Accessibility Review
Evaluate designs and implementations against WCAG 2.1 AA standards.
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?
