Workflow Development

Accessibility Audit

Step-by-step accessibility check for a page or component

accessibilitya11yfrontend
CLAUDE.md

When auditing a page or component for accessibility:

  1. Run an automated scan (axe, Lighthouse) and fix all reported issues first.
  2. Tab through the entire page with keyboard only. Verify every interactive element is reachable and operable.
  3. Check that focus indicators are visible on every focusable element.
  4. Verify all images have descriptive alt text (or alt="" for decorative images).
  5. Verify all form inputs have associated labels.
  6. Check color contrast meets WCAG AA (4.5:1 for text, 3:1 for large text).
  7. Test with a screen reader (VoiceOver, NVDA). Verify headings, landmarks, and interactive elements are announced correctly.
  8. Verify the page works at 200% browser zoom without horizontal scrolling or content overlap.

Copy this workflow into your CLAUDE.md or agent config file so your agent follows this process automatically.

get crystl