📖 Notes
LESSON 21 OF 26
Accessibility — Designing for Everyone
Good Design Works for Every User
WCAG 2.1 guidelines, color contrast ratios, keyboard navigation, screen reader support, and inclusive design.
Core Requirements
WCAG 2.1: Contrast, Keyboard, Screen Readers
🎨
Color Contrast
WCAG 2.1 AA requires 4.5:1 contrast for normal text, 3:1 for large text (18pt+ or 14pt bold).
⌨️
Keyboard Navigation
Every interactive element must be reachable and operable using Tab, Enter, and arrow keys alone.
🔊
Screen Reader Support
Alt text, ARIA labels, and semantic HTML let screen readers describe content accurately.
🌍
Inclusive Design
Designing for permanent, temporary, and situational disabilities benefits all users, not just some.
Why Accessibility Isn't Optional
Accessible design isn't a separate feature bolted on at the end — high contrast, clear focus states, and keyboard support tend to make an interface clearer for every user, disabled or not.
✅
Check contrast early with Stark
Verifying contrast ratios during the design phase (e.g. with the Stark plugin from Lesson 12) is far cheaper than fixing it after development.