Accessibility: WCAG 2.1 AA Compliance
all
Persona: accessibility-tester
Touchpoint: all public pages
Preconditions
- Pages deployed to production
- WCAG accessibility standards apply (Section 508, ADA)
Steps
| # | Action | Expected Result |
|---|---|---|
| 1 | Test keyboard navigation | Can tab through all interactive elements. Focus visible. Logical tab order. |
| 2 | Test color contrast | Text/background contrast ≥4.5:1 (normal text), ≥3:1 (large text). No color-only info. |
| 3 | Test with screen reader (NVDA or JAWS) | All content readable. Images have alt text. Landmarks (header, main, footer) marked. |
| 4 | Check form labels | All inputs have associated labels. Error messages associated with fields. |
| 5 | Test button text | Buttons have descriptive text. No icon-only buttons without label. |
| 6 | Check heading hierarchy | Headings use h1-h6 in order. No skipping levels. Content structure clear. |
| 7 | Test with zoom at 200% | Layout doesn't break. Text readable. No horizontal scroll required. |
| 8 | Run automated accessibility audit (axe, Lighthouse) | Zero critical issues. <5 warnings. Actionable errors fixed. |
Known Failure Modes
- Keyboard inaccessible — users with motor impairment locked out
- Low contrast — vision-impaired can't read
- No alt text on images — screen reader users miss content
- Broken at zoom 200% — magnified users excluded
References
- Playwright spec:
e2e (accessibility audit) - Code files:
Notes
WCAG 2.1 AA is the legal standard (ADA, Section 508). Accessibility isn't optional — it's a legal requirement and moral imperative. ~15% of users have disabilities. Inaccessible site = lawsuits + lost customers. Use axe, Lighthouse, or WAVE for automated scanning.