Amanoba Logo
Back to Course

Accessibility as a Design Constraint

Day 10 of 30 · The Playbook 2026 – Masterclass for Designers

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