clawpod-app /accessibility-review
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
1. **[Critical fix]** — Affects [who] and blocks [what]
2. **[Major fix]** — Improves [what] for [who]
3. **[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.