Module 7: Design Systems & Accessibility
Build scalable design systems and create inclusive experiences for all users.
What is a Design System?
A design system is a collection of reusable components, guidelines, and standards that ensure consistency across your product. Think of it as LEGO blocks - you create the pieces once, then build anything by combining them in different ways.
🎨 Why Design Systems Matter:
- Consistency: Same look and feel everywhere
- Speed: Design and build faster with reusable components
- Scale: Easy to maintain as your product grows
- Collaboration: Designers and developers speak same language
Companies like Airbnb, Shopify, and IBM have famous design systems!
Building a Design System
Core Elements
1. Design Tokens
Design tokens are the atomic values of your design system - colors, spacing, typography. They're like variables in code.
Example Tokens:
color-primary: #EC4899
color-secondary: #8B5CF6
spacing-sm: 8px
spacing-md: 16px
spacing-lg: 24px
font-size-body: 16px
font-size-heading: 32px
2. Component Library
Reusable UI components with all their states and variations.
Buttons
Inputs
3. Documentation
Guidelines on when and how to use each component. Include do's and don'ts.
Button Usage:
✅ Use primary button for main action
❌ Don't use more than one primary button per screen
4. Patterns & Templates
Common layouts and flows (login page, dashboard, settings). Pre-built combinations of components.
Accessibility (A11y)
Accessibility means designing for everyone, including people with disabilities. It's not just the right thing to do - it's often legally required and makes your product better for all users.
♿ Who Benefits from Accessibility?
- • Blind users: Use screen readers to navigate
- • Low vision: Need high contrast and larger text
- • Deaf users: Need captions for videos
- • Motor disabilities: Can't use a mouse, keyboard only
- • Cognitive disabilities: Need clear, simple language
- • Everyone: Captions help in noisy environments, good contrast helps in sunlight
WCAG Standards
WCAG (Web Content Accessibility Guidelines) has 3 levels: A (minimum), AA (standard), AAA (enhanced). Aim for AA compliance.
Perceivable
Users must be able to perceive information. Provide text alternatives for images, captions for videos.
Operable
Users must be able to operate the interface. Keyboard navigation, enough time to read, no seizure-inducing flashes.
Understandable
Information must be understandable. Clear language, predictable navigation, helpful error messages.
Robust
Content must work with assistive technologies. Use semantic HTML, proper ARIA labels.
Color Contrast & Readability
Sufficient color contrast ensures text is readable for everyone, including people with low vision or color blindness. WCAG requires minimum contrast ratios.
❌ Poor Contrast
This text is hard to read
Contrast ratio: 2.1:1 (Fails WCAG)
✅ Good Contrast
This text is easy to read
Contrast ratio: 15:1 (Passes AAA)
📏 Contrast Requirements:
- • Normal text: 4.5:1 minimum (AA), 7:1 enhanced (AAA)
- • Large text (18px+): 3:1 minimum (AA), 4.5:1 enhanced (AAA)
- • UI components: 3:1 minimum for buttons, form fields
- • Use tools like WebAIM Contrast Checker to test
Keyboard Navigation
Many users can't use a mouse - they navigate with keyboard only. Every interactive element must be reachable and usable with keyboard.
Essential Keyboard Shortcuts
Tab
Move to next interactive element
Shift + Tab
Move to previous element
Enter/Space
Activate buttons and links
Esc
Close modals and menus
Arrow Keys
Navigate within components
⌨️ Keyboard Best Practices:
- • Visible focus indicators (outline or highlight)
- • Logical tab order (left to right, top to bottom)
- • Skip links to jump to main content
- • Trap focus in modals (can't tab outside)
- • Test your entire app with keyboard only!
Screen Reader Optimization
Screen readers convert text to speech for blind users. Use semantic HTML and ARIA labels to make your content understandable.
Use Semantic HTML
❌ Bad
<div onclick="..."> Click me </div>✅ Good
<button> Click me </button>Add Alt Text to Images
<img src="logo.png" alt="Company logo" />Screen reader announces: "Company logo, image"
Use ARIA Labels When Needed
<button aria-label="Close dialog"> X </button>Screen reader announces: "Close dialog, button"
Inclusive Design Practices
✅ Do
- • Provide multiple ways to complete tasks
- • Use clear, simple language
- • Allow text resizing up to 200%
- • Provide captions and transcripts
- • Test with real users with disabilities
- • Use color AND icons/text (not color alone)
❌ Don't
- • Rely on color alone to convey information
- • Use tiny text (under 16px)
- • Auto-play videos with sound
- • Use flashing content (seizure risk)
- • Disable zoom on mobile
- • Use vague link text ("click here")
🎨 Final Project: Build a Mini Design System
Create a small but complete design system with accessibility built in.
Project: E-commerce Design System
Create in Figma:
- ✓ Design Tokens: Colors (with WCAG AA contrast), spacing scale, typography scale
- ✓ Components: Buttons (3 variants), form inputs, cards, navigation
- ✓ Patterns: Product card, checkout flow, empty states
- ✓ Documentation: Usage guidelines for each component
- ✓ Accessibility: Ensure all text meets contrast requirements, document keyboard navigation
Bonus: Create a simple style guide page showing all components
📚 Module Summary
You've learned to build scalable, accessible design systems:
- ✓ Design system fundamentals and components
- ✓ Design tokens and documentation
- ✓ WCAG accessibility standards
- ✓ Color contrast and readability
- ✓ Keyboard navigation
- ✓ Screen reader optimization
- ✓ Inclusive design practices
Congratulations! You've completed the UI/UX Design learning path. You now have the skills to create beautiful, accessible, user-centered designs!