Accessibility as a Design Constraint

Embed WCAG basics into the system: contrast, focus, keyboard, motion, alt/labels.

---

Learning Goal

• WCAG basics: contrast, focus, keyboard nav, ARIA.
• Respect prefers-reduced-motion.
• Require alt text and form labels.
• Create a Playbook accessibility checklist.
• Ensure all lessons adhere to these constraints.

---

Why This Matters

• Legal, reputational, inclusive.
• Better usability for everyone.
• The system cannot be “pretty but unusable.”

---

Explanation

• Contrast: text 4.5:1 (small text 7:1).
• Focus: visible, keyboard reachable.
• Keyboard: tab order, skip link.
• Motion: prefers-reduced-motion.
• ARIA: role, label, describedby basics.

---

Examples

Bad: Invisible focus, 2:1 contrast, autoplay animation.

Good: 4.5:1 contrast, focus ring, tab order, reduce-motion fallback.

---

Guided Exercise (10–15 minutes)

1. Create an A11Y checklist: contrast, focus, tab order, aria-label, alt text.
2. Tie it to color/type systems (contrast table).
3. Set prefers-reduced-motion fallback.

Independent Exercise (5–10 minutes)

Audit one screen with the checklist, file issues for gaps.

---

Self-Check

• Checklist ready.
• Contrast and focus rules documented.
• Reduce-motion set.
• Alt/labels mandatory.

---

Optional Deepening

• WCAG 2.2 overview: https://www.w3.org/WAI/standards-guidelines/wcag/
• Deque contrast tools: https://www.deque.com/blog/color-contrast-accessibility-tools/