Use Claude for Accessibility Testing

Accessibility issues are easy to miss in code review. Claude catches them if you ask specifically.

Component Audit

Audit all React components in src/components/ for accessibility:
- Missing alt text on images
- Missing ARIA labels on interactive elements
- Color contrast ratios below WCAG AA (4.5:1)
- Missing keyboard event handlers alongside click handlers
- Missing form labels and fieldset groupings

Automated with Playwright MCP

Combine Claude’s analysis with Playwright for runtime checks:

Use Playwright to navigate to /settings.
Run an accessibility audit:
1. Tab through every interactive element. Flag any that aren't reachable.
2. Check that focus indicators are visible.
3. Verify all form inputs have associated labels.
4. Test with a screen reader simulation.

Fix Patterns

Claude knows the common fixes:

For each accessibility issue you found:
1. Show the current code
2. Show the fixed code
3. Explain why the fix matters

Apply all fixes. Run the linter after.

Add to CI

# In CLAUDE.md or a review skill
On every PR that touches src/components/:
Check new/modified components for WCAG AA compliance.
Block the review if critical a11y issues are found.

Tip

Start with a baseline audit of your whole UI. Fix the critical issues first (missing labels, no keyboard access), then enforce standards on new code.