blob: 1faadf9770ad3b06ee402eebad00bbc8d3e387f1 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
---
description: Run accessibility audit on components
argument-hint: "[component-path]"
allowed-tools: Read, Bash, WebFetch
---
Analyze components for accessibility issues and provide recommendations.
## Instructions
1. If no path specified, analyze all components in `components/ui/`
2. Check for common accessibility issues
3. Verify WCAG 2.1 AA compliance
4. Provide specific recommendations for fixes
5. Generate accessibility report
## Checks to Perform
### HTML Semantics
- [ ] Proper heading hierarchy (h1 → h2 → h3)
- [ ] Semantic HTML elements used appropriately
- [ ] Lists use ul/ol with li elements
- [ ] Buttons vs links used correctly
### ARIA Implementation
- [ ] Required ARIA attributes present
- [ ] ARIA roles used appropriately
- [ ] aria-label or aria-labelledby for interactive elements
- [ ] aria-describedby for additional context
- [ ] Live regions for dynamic content
### Keyboard Navigation
- [ ] All interactive elements keyboard accessible
- [ ] Tab order is logical
- [ ] Focus indicators visible
- [ ] Escape key closes modals/popups
- [ ] Arrow keys work in menus/lists
### Forms
- [ ] All inputs have associated labels
- [ ] Required fields marked with aria-required
- [ ] Error messages associated with inputs
- [ ] Form validation accessible
### Images & Media
- [ ] Images have alt text
- [ ] Decorative images have empty alt=""
- [ ] Videos have captions/transcripts
- [ ] Audio has transcripts
### Color & Contrast
- [ ] Text contrast ratio ≥ 4.5:1 (normal text)
- [ ] Text contrast ratio ≥ 3:1 (large text)
- [ ] Focus indicators have sufficient contrast
- [ ] Information not conveyed by color alone
### Motion & Animation
- [ ] Respects prefers-reduced-motion
- [ ] Animations can be paused/stopped
- [ ] No flashing content (seizure risk)
## Automated Testing
Install and run automated tools:
```bash
# Install testing dependencies
npm install -D @axe-core/react jest-axe
# Run axe-core tests
npx axe <url>
# Use React Testing Library
npm test -- --coverage
```
## Manual Testing Checklist
1. **Keyboard Only Navigation**
- Disconnect mouse
- Navigate using Tab, Shift+Tab, Enter, Space, Arrows, Escape
- Verify all features accessible
2. **Screen Reader Testing**
- NVDA (Windows)
- JAWS (Windows)
- VoiceOver (macOS: Cmd+F5)
- Verify content makes sense when read aloud
3. **Browser Extensions**
- axe DevTools
- WAVE (WebAIM)
- Lighthouse (Chrome DevTools)
4. **Visual Testing**
- 200% zoom level
- High contrast mode
- Grayscale mode
- Disable CSS
## Report Format
```markdown
# Accessibility Audit Report
## Summary
- Components analyzed: X
- Critical issues: X
- Warnings: X
- Passed checks: X
## Critical Issues
1. **[Component]**: [Issue description]
- Impact: [High/Medium/Low]
- Fix: [Specific recommendation]
## Warnings
1. **[Component]**: [Warning description]
- Recommendation: [Improvement suggestion]
## Passed Checks
- ✓ Keyboard navigation working
- ✓ ARIA attributes present
- ✓ Color contrast sufficient
## Recommendations
1. Immediate fixes needed for...
2. Consider improving...
3. Best practices to adopt...
```
## Common Fixes
### Missing Labels
```tsx
// ❌ Bad
<input type="text" />
// ✅ Good
<label htmlFor="email">Email</label>
<input id="email" type="text" />
```
### Focus Management
```tsx
// Add focus trap for modals
import { FocusTrap } from '@radix-ui/react-focus-trap'
<FocusTrap>
<DialogContent>...</DialogContent>
</FocusTrap>
```
### Screen Reader Announcements
```tsx
// Live region for dynamic content
<div role="status" aria-live="polite" aria-atomic="true">
{message}
</div>
```
## Example
If the user says: `/analyze-accessibility`
1. Scan all components in components/ui/
2. Check each component against accessibility checklist
3. Run automated tests if available
4. Generate detailed report with:
- Issues found
- Specific fixes needed
- Code examples
- Priority levels
|
