Learning Goal

To understand the importance of embedding WCAG (Web Content Accessibility Guidelines) basics into the design system and how it can enhance the overall user experience.

Who

Designers, developers, and project managers looking to create more inclusive and accessible digital products.

What

This lesson covers the key aspects of accessibility as a design constraint, including:

WCAG basics: contrast, focus, keyboard, motion, alt/labels.
Respect for prefers-reduced-motion.
Require alt text and form labels.
Creation of a Playbook accessibility checklist.
Ensuring all lessons adhere to these constraints.

Where

This lesson can be applied to any digital product or service, from websites to mobile apps.

When

When starting a new design project or reviewing existing ones to ensure they meet accessibility standards.

Why it matters

Accessibility matters because it ensures that digital products can be used by everyone, regardless of their abilities. It's not just a legal requirement but a moral one, promoting equality and inclusion.

How

To embed WCAG basics into your design system:

Understand the key guidelines (contrast, focus, keyboard, motion, alt/labels).
Use color/type systems to ensure consistent and accessible color choices.
Incorporate prefers-reduced-motion to respect user preferences.
Require alt text and form labels to provide alternative content.
Create a Playbook accessibility checklist to streamline your design process.
Review and refine your lessons to ensure they meet accessibility standards.

Guided Exercise

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

Independent Exercise

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/

Accessibility as a Design Constraint