Accessibility

Why Accessibility Matters

Accessibility isn't a feature—it's a fundamental requirement. 15% of the world's population has some form of disability. Designing accessible products expands your market, improves usability for everyone, and is often legally required.

The Business Case

Market Size: 1.3 billion people with disabilities globally
Purchasing Power: $13 trillion in disposable income
Legal Risk: Domino's lost $4M+ lawsuit for inaccessible website
SEO Benefit: Accessible sites rank higher in search
Better for All: Curb cuts help wheelchairs, strollers, bikes, luggage

Types of Disabilities

Visual Disabilities

Blindness: 39M people worldwide
Low Vision: 246M people
Color Blindness: 300M people (8% of men, 0.5% of women)

Solutions: Screen readers, high contrast, don't rely on color alone

Motor Disabilities

Limited Dexterity: Arthritis, Parkinson's, tremors
Paralysis: Spinal injuries, stroke

Solutions: Keyboard navigation, large touch targets, voice control

Auditory Disabilities

Deafness: 70M people
Hard of Hearing: 430M people

Solutions: Captions, transcripts, visual indicators

Cognitive Disabilities

Dyslexia: 10% of population
ADHD: 5% of adults
Autism: 1% of population

Solutions: Clear language, consistent patterns, reduce distractions

Situational Disabilities

Bright Sunlight: Can't see screen (temporary visual impairment)
Noisy Environment: Can't hear audio (temporary auditory impairment)
Holding Baby: One-handed use (temporary motor impairment)

Lesson: Accessible design helps everyone in various situations

WCAG Guidelines

Web Content Accessibility Guidelines (WCAG) 2.1

Four Principles (POUR):

Perceivable: Information must be presentable to users in ways they can perceive
Operable: Interface components must be operable
Understandable: Information and operation must be understandable
Robust: Content must be robust enough for assistive technologies

Conformance Levels

Level A: Minimum (must have)
Level AA: Recommended (should have) — legal standard in many countries
Level AAA: Enhanced (nice to have)

Color & Contrast

WCAG Contrast Requirements

AA Normal Text: 4.5:1 minimum
AA Large Text: 3:1 minimum (18pt+ or 14pt+ bold)
AAA Normal Text: 7:1 minimum
AAA Large Text: 4.5:1 minimum

Example: Slack's Contrast Fix

Problem: Purple links (#4A154B) on white failed contrast (3.9:1)

Impact: Users with low vision couldn't read links

Solution: Darkened to #1D1C1D (12.6:1 ratio)

Result: Passed AAA, improved readability for all users

Don't Rely on Color Alone

Error States: Red color + icon + text message
Links: Color + underline
Charts: Color + patterns + labels
Status: Color + icon + text

Example: GitHub's Colorblind-Friendly Diff

Original: Green for additions, red for deletions

Problem: Red-green colorblind users (8% of men) couldn't distinguish

Solution: Added + and - symbols, different background patterns

Result: Works for all users regardless of color vision

Keyboard Navigation

Keyboard Accessibility Requirements

Tab Order: Logical sequence through interactive elements
Focus Indicators: Visible outline showing current element
Skip Links: Jump to main content, bypass navigation
Keyboard Shortcuts: Alternative to mouse actions
No Keyboard Traps: Can always navigate away

Example: Gmail's Keyboard Shortcuts

Power User Feature: Entire email workflow without mouse

C = Compose
/ = Search
E = Archive
R = Reply
J/K = Next/Previous email

Benefit: Accessibility feature became productivity feature, loved by all users

Common Keyboard Mistakes

Removing Focus Outline: Never use outline: none without replacement
Illogical Tab Order: Jumping around the page randomly
Custom Controls: Dropdowns that don't work with keyboard
Modal Traps: Can't escape modal with keyboard

Screen Readers

Example: Twitter's Image Descriptions

Feature: Optional alt text when uploading images

Implementation:

Reminder to add description
420 character limit
Screen reader announces description
Badge shows image has description

Impact: Millions of images now accessible to blind users

Writing Good Alt Text

Bad: "image.jpg"

Bad: "A picture"

Good: "Golden retriever puppy playing with tennis ball in grass"

Decorative: alt="" (empty, screen reader skips)

Touch Targets & Motor Accessibility

Touch Target Sizes

Minimum: 44x44px (iOS), 48x48px (Android)
Recommended: 48x48px minimum for all platforms
Spacing: 8px minimum between targets

Example: Apple's Dynamic Type

Feature: System-wide text size adjustment

Range: xSmall to AX5 (extra large accessibility sizes)

Requirement: All iOS apps must support Dynamic Type

Benefit: Users with low vision can read all text, buttons scale proportionally

Motor Accessibility Tips

Large Targets: Easy to tap, even with tremors
Undo Actions: Forgive accidental taps
Confirmation: Destructive actions require confirmation
Voice Control: Support voice commands
Sticky Keys: Don't require simultaneous key presses

Captions & Transcripts

Example: YouTube's Auto-Captions

Technology: AI-generated captions for all videos

Accuracy: 70-80% (improving constantly)

Editing: Creators can correct auto-captions

Impact: Billions of videos now accessible to deaf users

Bonus: Captions help non-native speakers, noisy environments, SEO

Caption Best Practices

Accuracy: 99%+ accuracy required
Timing: Synced with audio
Speaker ID: Show who's talking
Sound Effects: [applause], [music playing]
Readability: 1-2 lines, on screen 3+ seconds

Forms & Input Accessibility

Accessible Form Design

Labels: Every input has visible label
Error Messages: Clear, specific, associated with field
Required Fields: Indicated visually and in code
Input Types: Use correct type (email, tel, number)
Autocomplete: Enable for common fields

Example: GOV.UK's Form Patterns

Research: Tested forms with users with disabilities

Findings:

Placeholder text disappears, users forget what to enter
Inline validation confuses screen readers
Red asterisks for required fields not announced

Solution:

Always visible labels above inputs
Validate on submit, show all errors at top
Text "(required)" instead of asterisk

Result: Form completion rate increased 30%

Testing for Accessibility

Automated Testing Tools

axe DevTools: Browser extension, finds 57% of issues
WAVE: Visual feedback on accessibility
Lighthouse: Built into Chrome, accessibility audit
Pa11y: Command-line testing

Limitation: Automated tools catch ~30% of issues, manual testing required

Manual Testing Checklist

Keyboard Only: Unplug mouse, navigate entire site
Screen Reader: Turn on VoiceOver/NVDA, complete tasks
Zoom: Increase text size to 200%, check layout
Color Contrast: Check all text meets 4.5:1
Color Blindness: Use simulator, check all info conveyed

Example: Microsoft's Inclusive Design Toolkit

Approach: Test with people with disabilities

Program: Hire users with disabilities as consultants

Process: Every major feature tested with diverse abilities

Impact: Xbox Adaptive Controller created from this process, won awards, expanded gaming market

Accessibility at Scale (Staff/Director Level)

Building Accessibility Culture

Executive Sponsorship: C-level commitment
Dedicated Team: Accessibility specialists
Training: All designers/engineers trained
Design System: Accessible components by default
Automated Testing: CI/CD pipeline checks
Metrics: Track and report accessibility issues
User Testing: Regular testing with disabled users

Example: Apple's Accessibility Leadership

Commitment: "Accessibility is a core value"

Investment:

Dedicated accessibility team of 100+ people
Built-in features: VoiceOver, Voice Control, Switch Control
Every feature reviewed for accessibility
Annual accessibility awards for apps

Impact: Industry leader, expanded market, improved brand reputation

Example: Airbnb's Accessibility Transformation

2018: Sued for inaccessible website

Response:

Hired accessibility team
Audited entire platform
Fixed 1,000+ issues
Added accessibility filters (step-free access, etc.)
Trained all designers on accessibility

Result: Settled lawsuit, became accessibility leader in travel, expanded market

Legal Requirements

Global Accessibility Laws

ADA (USA): Americans with Disabilities Act, applies to websites
Section 508 (USA): Federal websites must be accessible
EAA (EU): European Accessibility Act, WCAG 2.1 AA required
AODA (Canada): Accessibility for Ontarians with Disabilities Act
DDA (UK): Disability Discrimination Act

Legal Risks

Lawsuits: 10,000+ ADA website lawsuits filed in 2020
Settlements: Average $10,000-$50,000
Brand Damage: Public perception impact
Lost Revenue: Inaccessible = lost customers

📅 Evolution of Accessibility

Pre-2000: Afterthought & Compliance

Example: Section 508 compliance (1998)

Accessibility seen as legal requirement only
Screen readers were expensive ($1000+)
Alt text often missing or generic
Separate "accessible" versions of sites
Minimal designer awareness or training

Pre-2023: Built-In & Best Practice

Example: WCAG 2.1, Apple VoiceOver, ARIA

WCAG standards widely adopted
Free screen readers built into OS
Automated accessibility testing tools
Designers trained in a11y principles
Inclusive design movement

2023+: AI-Enhanced & Universal

Example: AI auto-generates alt text, real-time captions

AI writes descriptive alt text automatically
Real-time live captions for all video
Voice control and eye-tracking standard
Accessibility scores in design tools
Universal design by default

Fun Fact

The curb cut effect: Features designed for accessibility often benefit everyone! Curb cuts were created for wheelchairs in the 1970s, but they also help people with strollers, luggage, bikes, and delivery carts. In digital design, captions help people in noisy environments, voice control helps people cooking, and high contrast helps people in bright sunlight. Microsoft found that 70% of people benefit from accessibility features, not just the 15% with permanent disabilities!

⚠️ When Theory Meets Reality: The Contradiction

Theory Says: Accessible design requires extra work and compromises aesthetics

Reality: Apple's products are both beautiful AND highly accessible—accessibility drives their design excellence.

Example: Apple's Accessibility-First Design

VoiceOver built into every Apple device since 2005
Accessibility features are beautifully designed, not hidden
Dynamic Type scales text without breaking layouts
Accessibility team reports directly to CEO
Won awards for both design AND accessibility

Lesson: Accessibility doesn't compromise design—it elevates it. Constraints breed creativity. When you design for edge cases, you create better products for everyone. Accessibility is a design challenge, not a checkbox.

📚 Resources & Further Reading

Books

Horton, Sarah, and Whitney Quesenbery. A Web for Everyone: Designing Accessible User Experiences. Rosenfeld Media, 2014.
Pickering, Heydon. Inclusive Design Patterns. Smashing Magazine, 2016.
Holmes, Kat. Mismatch: How Inclusion Shapes Design. MIT Press, 2018.

Standards & Guidelines

WCAG 2.1 (Web Content Accessibility Guidelines) - https://www.w3.org/WAI/WCAG21/quickref/
Section 508 Standards - https://www.section508.gov/
Apple Accessibility Guidelines - https://developer.apple.com/accessibility/

Tools

WAVE - Web accessibility evaluation tool
axe DevTools - Accessibility testing extension
Stark - Accessibility plugin for Figma
Color Oracle - Color blindness simulator