📖 Step 2: Design - UI/UX Basics#58 / 291
Accessibility (a11y)
Accessibility (a11y)
📖One-line summary
Design principles that make a product usable by people with disabilities and older adults.
✨Example
A design accessible to every user
✓Image with alt text
✓Navigable by keyboard
✓Sufficient color contrast (4.5:1 or higher)
✕Conveying info by color alone (bad example)
⚡Vibe coding prompt examples
>_
Audit the entire website's accessibility. Verify keyboard navigation, screen reader compatibility, and contrast against WCAG 2.1 AA.
>_
Add WAI-ARIA attributes to a custom dropdown. Set role, aria-expanded, aria-selected, etc. correctly.
>_
Add aria-label and aria-describedby to key components so blind users can perform screen reader testing.
Try these prompts in your AI coding assistant!