Accessibility
Keyboard Accessibility
Overview
Web accessibility means people with disabilities can perceive, understand, navigate, interact with and contribute to the web. Its goal is to remove the barriers that stop them using information online - not just to comply with standards, but to build a web that is usable and empowering for everyone.
Accessibility Statistics
Global impact
- About 1.3 billion people live with a significant disability - roughly 16% of the world (WHO)
- Many disabilities are invisible: cognitive, mental health, temporary
State of the web
- About 95% of home pages have detectable WCAG failures (WebAIM Million)
- Home pages average around 50+ errors
- Most common: low contrast text, missing alt text, missing form labels, empty links and buttons
User impact
- Around 70% of disabled users leave a site that is hard to use
- Basic tasks like reading or navigating often become impossible
Business impact
- The disability market represents trillions in spending power
- Accessible sites convert better, engage more and bounce less
Legal & compliance
- Thousands of accessibility lawsuits are filed every year
- WCAG is becoming mandatory in many regions (e.g. the European Accessibility Act, ADA cases in the US)
- Non-compliance means penalties, brand damage and lost trust
Accessibility is not a niche concern. A product that isn't accessible is effectively unusable for a large group of people.
Types of Disabilities
| Permanent | Temporary | Situational | |
|---|---|---|---|
| Touch | One arm | Arm injury | New parent holding a baby |
| See | Blind | Cataract | Distracted driver |
| Hear | Deaf | Ear infection | Bartender in a loud bar |
| Speak | Non-verbal | Laryngitis | Heavy accent |
Visual
- Blindness, low vision and colour blindness; users often rely on assistive tools.
- Use a screen-reader-friendly structure (semantic HTML, proper headings).
- Ensure high colour contrast and never rely on colour alone.
- Allow text resizing and zoom without breaking the layout.
Hearing
- Provide captions for video and transcripts for audio.
- Don't depend only on sound alerts or voice instructions.
- Give visual feedback for important actions.
Motor
- Ensure full keyboard access (Tab, Enter, Escape).
- Provide large click/tap targets.
- Avoid interactions that need fine motor control (tiny targets, precise drag).
Neurological (cognitive)
- Includes ADHD, dyslexia and memory issues.
- Keep the UI simple and predictable, with clear structure and readable text.
- Avoid flashing, auto-play and complex animations.
Speech
- Provide text alternatives to voice input.
- Never make a feature depend only on speech.
Temporary and situational
- Injuries, fatigue, bright sunlight or a noisy train all limit how people use your app.
- Support multiple input methods (keyboard, touch, voice) and design to be flexible and forgiving.
- Captions help in noisy places; good contrast helps in bright light.
Because it covers temporary and situational limits too, designing for accessibility improves usability for everyone.
Assistive Technology
Assistive technology helps people with disabilities navigate, read and operate websites - but it only works when the site is built with proper accessibility practices.
| Technology | Who uses it | What your site needs | Example |
|---|---|---|---|
| Keyboard only | People with motor disabilities or injuries | Every control focusable, logical tab order, visible focus outline | A user with a hand injury shops using only Tab and Enter |
| Screen readers (NVDA, JAWS, VoiceOver, TalkBack) | Blind and low-vision users | Semantic HTML, alt text, proper labels | A blind user reads the news and fills in forms by audio |
| Mouse & pointer alternatives | People who can't use a mouse precisely | Large targets, no precision-only interactions | Eye-tracking or a head pointer to click buttons |
| Touchscreen gestures | Screen reader users on phones | Real buttons and labels, so swipe navigation works | Swiping through an app with VoiceOver |
| Screen magnifiers | Low-vision users | Responsive layout, scalable text | Zooming the page to 200% to read it |
Using a Site with Only the Keyboard
| Key | What it does |
|---|---|
Tab / Shift + Tab | Move to the next / previous focusable element |
Enter | Follow a link, press a button, submit a form |
Space | Press a button, toggle a checkbox, scroll the page |
| Arrow keys | Move within radio groups, menus, tabs, sliders and selects |
Escape | Close a dialog, menu or popup |
A <div> with a click handler is invisible to the keyboard - a <button> works for free
<!-- ❌ Not focusable, no Enter/Space, not announced as a button -->
<div class="btn" onclick="save()">Save</div>
<!-- ✅ Focusable, works with Enter and Space, announced as "Save, button" -->
<button type="button" onclick="save()">Save</button>Try it now: put your mouse away and use your own site with Tab, Enter, Space and Escape. Anything you can't reach or can't see is a bug.
Accessibility Standards: WCAG
- WCAG (Web Content Accessibility Guidelines) is the international standard for accessible web content, created by the W3C.
- It is the benchmark for compliance, legal requirements and industry best practice. The current version is WCAG 2.2.
- Read it at w3.org/WAI/standards-guidelines/wcag.
| Level | Meaning | Examples |
|---|---|---|
| A - basic | The minimum. Failing it means some users can't use the site at all | Alt text on images, everything usable by keyboard |
| AA - recommended | The level most laws and companies target; balances accessibility with practicality | Colour contrast of 4.5:1, accessible forms, clear navigation |
| AAA - highest | Very strict; not practical for every site. Used for government and critical platforms | Contrast of 7:1, sign language for video |
Most real-world products aim for WCAG 2.2 Level AA.
The Four Principles: POUR
Perceivable
- Content doesn't rely on a single sense
- Alt text for images, captions for video
- Good colour contrast
- Text resizes without breaking the layout
Operable
- Everything works with a keyboard
- Proper focus management, no keyboard traps
- Enough time to complete actions
- No flashing content (it can trigger seizures)
Understandable
- Clear, simple language
- Proper form labels and error messages
- Consistent navigation and layout
- No unexpected changes like sudden redirects
Robust
- Works across browsers, devices and assistive tech
- Semantic HTML and correct ARIA
- Clean, valid code that keeps working as technology changes
Can users perceive it? Operate it? Understand it? Will it work everywhere (robust)? If any one fails, accessibility breaks.
Further reading: W3C Web Accessibility Initiative, WebAIM, and the Microsoft and Apple accessibility docs.