Accessibility Check

Accessibility Check

Perform a WCAG 2.1 AA compliance audit on frontend components.

Audit Areas

1. Keyboard Navigation

• All interactive elements must be focusable
• Tab order must be logical
• No keyboard traps
• Visible focus indicators (use .focus-ring)

2. Screen Reader Support

Search for issues:

# Icon-only buttons missing aria-label
grep -rE "<Button[^>]*>[^<]*<svg" frontend/src/components/ --include="*.tsx" | grep -v "aria-label"

# Images missing alt text
grep -r "<img" frontend/src/components/ --include="*.tsx" | grep -v "alt="

# Missing form labels
grep -rE "<input[^>]*>" frontend/src/components/ --include="*.tsx" | grep -v "aria-label\|id.*label"

3. Color Contrast

Pierre design system colors meet contrast requirements:

• pierre-gray-900 on white: 15.3:1 ✓
• pierre-gray-700 on white: 8.5:1 ✓
• pierre-gray-500 on white: 4.6:1 ✓ (minimum for large text)
• pierre-violet on white: 5.7:1 ✓

Flag if using:

• pierre-gray-400 for body text (3.0:1 - FAILS)
• Light colors on light backgrounds
• Custom colors not in design system

4. Touch Targets

• Minimum 44x44px for touch targets
• Check Button size="sm" usage - ensure adequate padding

5. Motion & Animation

• Respect prefers-reduced-motion
• No auto-playing animations that distract

Output Format

=== Accessibility Audit Report ===

📁 Files Analyzed: [count]

== Keyboard Navigation ==
✅/❌ Focus indicators: [details]
✅/❌ Tab order: [details]

== Screen Reader ==
✅/❌ Icon buttons: [count with aria-label / count missing]
✅/❌ Images: [count with alt / count missing]
✅/❌ Form labels: [details]

== Color Contrast ==
✅/❌ Text contrast: [details]
✅/❌ Interactive elements: [details]

== Touch Targets ==
✅/❌ Minimum size: [details]

== Issues Found ==
[CRITICAL] [file:line] - [issue]
[MAJOR] [file:line] - [issue]
[MINOR] [file:line] - [issue]

== Fixes Required ==
1. [specific fix with code example]

== Verdict ==
[PASS / NEEDS WORK - X critical, Y major, Z minor issues]

WCAG Quick Reference