Web Accessibility Practical Guide
Accessibility means ensuring a web that's usable by everyone: people with disabilities, seniors, mobile users, slow connections, broken arm, noisy environments, etc.
Why accessibility?
When we design for disability, we solve problems everyone encounters
Curb cuts revolutionized cities for wheelchairs, but also for all pedestrians with suitcases, strollers, or bikes.
An improvement for some benefits everyone. This concept, born from street access ramps, applies perfectly to the web.
Typical example of a curb cut
♿ Curb cuts
Designed for : Wheelchair users
Also benefits : Parents with strollers, cyclists, delivery workers with hand trucks, people with rolling suitcases, skateboards, scooters, elderly people
🎬 Video captions
Designed for : Deaf or hard of hearing people
Also benefits : Watching videos on the subway, learning a foreign language, following a conference in a noisy environment, understanding difficult accents
⌨️ Keyboard navigation
Designed for : People who cannot use a mouse
Also benefits : Developers using shortcuts, users with broken mouse, power users preferring keyboard, people with arm in cast
📱 Smartphone voice control
Designed for : Blind people and people with motor disabilities
Also benefits : Messaging while driving, sports with headphones, hands busy with tools, remote control, multitasking at the office
🪥 Electric toothbrush
Designed for : People with reduced mobility or arthritis (1954)
Also benefits : Better brushing for everyone, recommended by dentists, children learning, tired people, proven superior efficiency
🎧 Audiobooks
Designed for : Blind people (1932, American Foundation for the Blind)
Also benefits : Drivers, joggers, multitasking, dyslexics, children learning to read, $1.3 billion in sales in 2020
Accessibility is not a constraint, it's innovation in disguise.
Free tools to test accessibility
These tools help you identify and fix accessibility issues:
WAVE
Browser extension that visualizes accessibility errors directly on your page
axe DevTools
Developer extension integrated into DevTools, very precise and detailed
Lighthouse
Audit integrated into Chrome DevTools, includes an overall accessibility score
MDN Accessibility
Complete reference documentation on web accessibility
Colour Contrast Analyser
Free application to test color contrasts according to WCAG
Accessibility Insights
Microsoft suite of tools for in-depth manual and automated testing
Accessible Game Jam
InteractiveTest your knowledge of web accessibility interactively! A game to learn while having fun.
Common screen readers
Understanding the most commonly used screen readers to better test your interfaces:
VoiceOver
macOS/iOSScreen reader built into all Apple devices
TalkBack
AndroidDefault screen reader on Android
🧪 How to test with a screen reader
- Close your eyes or turn off the screen
- Navigate only with keyboard (Tab, arrows, Enter, Space)
- Listen carefully to what is announced
- Verify that everything is understandable without seeing the screen
Note : 15 minutes of testing with a screen reader is worth more than hours of automated auditing.
Quick navigation
Use the sidebar menu or these shortcuts to explore examples: