Accessibility (A11y)

Accessibility (often abbreviated as a11y) is the practice of making products, services, and environments usable by people of all abilities and disabilities.

Why A11y Matters

1 in 4 adults in the US has a disability affecting:

• Vision (blindness, low vision, color blindness)
• Hearing (deafness, hard of hearing)
• Motor (limited dexterity, tremors)
• Cognitive (dyslexia, autism, ADHD)
• Temporary (broken arm, bright sunlight)
• Situational (hands full, noisy environment)

Legal Requirements

ADA: Americans with Disabilities Act Section 508: US federal accessibility WCAG 2.1: Web Content Accessibility Guidelines (global standard)

• Level A (minimum)
• Level AA (target for most)
• Level AAA (enhanced)

POUR Principles

Perceivable: Users can perceive content

• Alt text for images
• Captions for videos
• Sufficient color contrast

Operable: Users can operate interface

• Keyboard navigation
• Enough time to read/complete
• No seizure-inducing flashes

Understandable: Content and interface are clear

• Readable text
• Predictable navigation
• Error prevention and recovery

Robust: Works with assistive technologies

• Valid HTML
• ARIA labels when needed
• Screen reader compatible

Common Accessibility Issues

❌ Missing alt text on images ❌ Poor color contrast ❌ Keyboard navigation doesn't work ❌ Forms without labels ❌ Confusing navigation structure ❌ Auto-playing media ❌ Inaccessible PDFs

Accessibility in IA

Card sorting for accessibility: ✅ Clear, logical structure helps everyone ✅ Consistent navigation reduces cognitive load ✅ User-friendly labels benefit all users ✅ Findable content aids screen reader users

IA best practices:

• Shallow hierarchies (easier to navigate)
• Clear headings (screen reader navigation)
• Descriptive links ("Read more about X" not "Click here")
• Consistent navigation patterns

Testing for Accessibility

Automated tools: WAVE, axe DevTools (catch ~30% of issues) Manual testing: Keyboard only, screen reader User testing: Test with people with disabilities

Quick Wins

1. Add alt text to all images
2. Ensure keyboard navigation works
3. Check color contrast (4.5:1 minimum)
4. Add labels to form fields
5. Use semantic HTML (headings, lists, landmarks)
6. Test with keyboard only

Accessibility = Better UX for Everyone

Curb cuts help:

• Wheelchair users (intended)
• Parents with strollers
• Delivery people with carts
• Travelers with luggage
• Everyone!

Build accessible navigation with card sorting at freecardsort.com