accessibility
Design inclusive products — WCAG compliance, assistive technology support, keyboard navigation, color contrast — so all users can access the product regardless of ability.
Goals
- Meet WCAG 2.1 AA as a baseline (AAA where possible)
- Support screen readers (NVDA, JAWS, VoiceOver)
- Ensure keyboard-only navigation
- Design for cognitive and motor accessibility
Contract
Input
A UI component, page, or product to audit for accessibility.
Output
An accessibility audit with:
- WCAG compliance checklist (perceivable, operable, understandable, robust)
- Issues ranked by severity (A, AA, AAA)
- Fix recommendations with code examples
WCAG 2.1 Principles
- Perceivable — alternative text, captions, sufficient contrast
- Operable — keyboard navigation, no seizure triggers
- Understandable — clear language, error identification
- Robust — valid HTML, ARIA when needed
Common Issues
| Issue |
Severity |
Fix |
| Missing alt text |
A |
Add descriptive alt to all images |
| Low contrast |
AA |
Use ≥4.5:1 (text) or ≥3:1 (large text) |
| No keyboard focus |
A |
Ensure all interactive elements are focusable |
| Missing form labels |
A |
Associate <label> with <input> |
| Autoplay media |
A |
Provide pause/stop controls |
| Missing skip links |
AA |
Add "skip to main content" link |
Tools
- Automated: axe, Lighthouse, WAVE
- Manual: keyboard nav, screen reader testing
- Color: Colour Contrast Analyser, WebAIM contrast checker
Steps
- Audit with automated tools — catch low-hanging fruit
- Test with keyboard — tab through every flow
- Test with screen reader — announce each element
- Review color contrast — check all text/background pairs
- Fix by severity — A first, then AA
- Document — accessibility statement and test results
References
../../ux/interaction-design/SKILL.md — interaction patterns../../frontend/frontend-design/SKILL.md — visual design
1---2name: accessibility3description: Design inclusive products — WCAG compliance, assistive technology support, keyboard navigation, color contrast — with explicit user access guarantees.4---56# accessibility78Design inclusive products — WCAG compliance, assistive technology support, keyboard navigation, color contrast — so all users can access the product regardless of ability.910## Goals11- Meet WCAG 2.1 AA as a baseline (AAA where possible)12- Support screen readers (NVDA, JAWS, VoiceOver)13- Ensure keyboard-only navigation14- Design for cognitive and motor accessibility1516## Contract1718### Input19A UI component, page, or product to audit for accessibility.2021### Output22An accessibility audit with:23- WCAG compliance checklist (perceivable, operable, understandable, robust)24- Issues ranked by severity (A, AA, AAA)25- Fix recommendations with code examples2627## WCAG 2.1 Principles28291. **Perceivable** — alternative text, captions, sufficient contrast302. **Operable** — keyboard navigation, no seizure triggers313. **Understandable** — clear language, error identification324. **Robust** — valid HTML, ARIA when needed3334## Common Issues3536| Issue | Severity | Fix |37|---|---|---|38| Missing alt text | A | Add descriptive alt to all images |39| Low contrast | AA | Use ≥4.5:1 (text) or ≥3:1 (large text) |40| No keyboard focus | A | Ensure all interactive elements are focusable |41| Missing form labels | A | Associate `<label>` with `<input>` |42| Autoplay media | A | Provide pause/stop controls |43| Missing skip links | AA | Add "skip to main content" link |4445## Tools4647- **Automated**: axe, Lighthouse, WAVE48- **Manual**: keyboard nav, screen reader testing49- **Color**: Colour Contrast Analyser, WebAIM contrast checker5051## Steps52531. **Audit with automated tools** — catch low-hanging fruit542. **Test with keyboard** — tab through every flow553. **Test with screen reader** — announce each element564. **Review color contrast** — check all text/background pairs575. **Fix by severity** — A first, then AA586. **Document** — accessibility statement and test results5960## References61- `../../ux/interaction-design/SKILL.md` — interaction patterns62- `../../frontend/frontend-design/SKILL.md` — visual design
quantumquirkxyz