Key Insight
Accessible design ensures all users—regardless of ability, device, or context—can perceive, understand, navigate, and interact with your interface.
Key Points
- •Visual: maintain 4.5:1 contrast ratio for normal text, 3:1 for large text (18px+ bold or 24px+ regular), and never rely on color alone to convey meaning
- •Interaction: all functionality must be operable via keyboard alone, with visible focus indicators, logical tab order, and minimum 44×44px touch targets
- •Content: use descriptive link text ("View order details" not "Click here"), proper heading hierarchy (h1→h2→h3, no skipping), and associate labels with inputs
- •Announce dynamic content changes (errors, toasts, live updates) to screen readers via ARIA live regions
- •Support user preferences: respect prefers-reduced-motion, prefers-color-scheme, and browser zoom up to 200% without breaking layout
- •Every interactive component needs explicitly designed states: default, hover, focus, active, disabled, and error
Guidelines
- ✓Test with keyboard only: can you reach every interactive element and complete every flow without a mouse?
- ✓Use semantic HTML first (button, nav, main, heading elements)—add ARIA only when native semantics are insufficient
- ✓Focus indicators must be visible against all backgrounds: use a 2px+ outline offset from the element with sufficient contrast
- ✓Provide text alternatives: alt text for images, captions for video, transcripts for audio
- ✓Group related form fields with fieldset/legend and announce validation errors with aria-describedby
- ✓Design for temporary disabilities too: broken arm (keyboard only), bright sunlight (high contrast), noisy environment (captions)
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall — strengthens long-term retention