atelier/domains/uiux/accessibility.md

Accessibility Requirements

Detailed, enforceable accessibility rules. Every component, page, and flow must pass these. Failure is disqualifying — see first-principles.md P2.

Perceivable

• Every image has alt text or is marked alt="" if decorative.
• Every video has captions. Every audio has transcripts.
• Color contrast meets WCAG 2.1 AA (4.5:1 text, 3:1 UI).
• Information is not conveyed by color alone.
• Text resizes to 200% without loss of content or function.

Operable

• Every interactive element is keyboard-reachable.
• Focus order is logical and matches visual order.
• Focus is always visible (≥ 3:1 contrast).
• No keyboard traps.
• Touch targets are ≥ 44×44 CSS pixels.
• Motion can be disabled via prefers-reduced-motion.
• No flashing content > 3 flashes per second.

Understandable

• Page language is declared.
• Form fields have associated labels.
• Error messages identify the field and the problem.
• Navigation is consistent across pages.
• Abbreviations and jargon are explained on first use.

Robust

• HTML validates.
• ARIA is used correctly (roles, states, properties).
• Components work across assistive technologies.
• No ARIA is used where native HTML would suffice.

Testing

Every accessibility requirement is verified by:

1. Automated tool (axe-core, Lighthouse, etc.)
2. Keyboard-only navigation
3. Screen reader (NVDA, VoiceOver) walkthrough
4. Zoom to 200%
5. Reduced motion enabled

All five must pass. Automated-only is not acceptance.