The Short Answer
Accessibility isn’t a checklist at the end. It’s how you design from the start.
These are the practical steps every designer should take, starting today.
The 5-Minute Accessibility Audit
1. Color Contrast (1 min)
Check every text color with WebAIM Contrast Checker. Minimum 4.5:1 for normal text, 3:1 for large text.
2. Focus States (1 min)
Click every interactive element with Tab. Is the focus visible? If not, add it.
3. Alt Text (1 min)
Every image should have descriptive alt text. Decorative images get empty alt text (alt="").
4. Labels (1 min)
Every form field has a visible label. No placeholder-only labels.
5. Keyboard Test (1 min)
Navigate your entire interface with just Tab, Enter, and Escape. Does everything work?
Design Principles
1. Don’t Rely on Color Alone
If red indicates an error, add an icon too. If green indicates success, add a checkmark.
2. Provide Keyboard Alternatives
Everything mouse users can do, keyboard users should too.
3. Use Clear Language
8th-grade reading level minimum. Short sentences. Active voice.
4. Be Consistent
Same navigation on every page. Same button behavior. Same terminology.
5. Test with Real Assistive Technologies
Turn on VoiceOver. Use NVDA. Experience your own product as a screen reader user would.
The Full Checklist
Visual Design
- Color contrast: 4.5:1 minimum for normal text
- Color contrast: 3:1 minimum for large text
- No color-only indicators (add icons or labels)
- Zoom to 200% — everything still works?
- High contrast mode tested
- Dark mode tested
Interaction Design
- All interactive elements keyboard-accessible
- Visible focus states on all elements
- No keyboard traps
- Skip navigation link present
- Touch targets at least 44x44px
- Drag-and-drop has keyboard alternative
Content
- All images have alt text
- Headings are hierarchical (h1-h6)
- Link text is descriptive (not “click here”)
- Form labels are visible
- Error messages explain the problem and solution
- Page has a title
Technical
- Semantic HTML used correctly
- ARIA attributes used appropriately
- Video has captions
- Audio has transcripts
- No auto-playing content
- Page structure is logical
Design System Accessibility
Build accessibility into your design system:
Tokens
- Color tokens with contrast baked in
- Focus state tokens
- Minimum tap size tokens
- Typography tokens
Components
- Accessible buttons (focus, disabled, states)
- Accessible forms (labels, errors, validation)
- Accessible modals (focus trapping, keyboard dismiss)
- Accessible navigation (skip links, active states)
The Bottom Line
Accessibility isn’t a project. It’s a practice. Start with the 5-minute audit. Build accessible components into your design system. Test with real assistive technologies. Iterate continuously.