Who we design for
Accessibility means people with different bodies, tools and situations can all finish the same task on your page. It is not about one "average" visitor. It is about the different ways people reach your content.
In one minute
- Usability asks: can this person finish the task? Accessibility asks: can people with any of these access needs finish the same task?
- Six groups to keep in mind: blind, low vision or colour blind, motor limits, deaf or hard of hearing, cognitive differences, and people who need a calm interface.
- Needs are not always permanent. A broken arm, bright sun or a noisy train create the same barriers for a while.
- The fix is nearly always the same idea: offer more than one way to see, hear, reach and understand each thing.
Picture a building with only a revolving door. Most people walk through. A parent with a pram, someone on crutches and someone in a wheelchair cannot. A ramp and a wide door help them, and they also help the delivery person with a trolley. Websites work the same way: build in more than one way in, and everyone benefits.
1. Meet six kinds of access need
Pick a group. See what tool they use, what breaks for them on a careless page, and what a careful page does instead. Switch the page between Careless and Careful to hear or see the difference.
One term first. The accessibility tree is a simplified copy of your page that the browser builds for assistive technology. It lists each thing's name, role (what it is) and state (on, off, expanded). A screen reader reads this tree, not the pixels.
Step 1. Choose a group.
Step 2. Choose how the page was built.
Blindness and screen readers
Tool:
What happens:
Many people sit in more than one group, and many needs are temporary or situational. Someone with one hand full of shopping has a motor limit for a minute. Someone in sunlight has low contrast vision. Designing for the edges makes the middle better.
2. Low vision and colour: size and second cues
Far more people have low vision or colour vision differences than are fully blind. They zoom in, make text bigger, raise
contrast, or cannot tell red from green. Two habits help most: size text in rem so it grows with the user's setting,
and never use colour as the only signal (WCAG 1.4.1 Use of Color). Text should reach 4.5:1 contrast (WCAG 1.4.3), and the page must reflow at 400% zoom without sideways scrolling (WCAG 1.4.10).
Step 1. Set the user's default text size, as if they changed it in browser settings.
Fixed in px ignores setting
Your order ships on Friday.
Sized in rem follows setting
Your order ships on Friday.
Step 2. Show an error message, then view it the way a colour blind user might (greyscale).
The px side is simulated by scaling only the rem side with the slider, since a web page cannot change your real browser setting.
In a real browser, text set in px does not follow the larger default size, and a user who relies on it is stuck.
3. Motor limits: bigger targets, every action reachable
People use a keyboard, a switch, voice control, an eye tracker, or a finger with a tremor. All of them need the same contract: every action is a real control, focus is visible, and nothing traps the user. Small targets are easy to miss. WCAG 2.2 sets a minimum of 24 by 24 CSS pixels (2.5.8, AA) and recommends 44 by 44 (2.5.5, AAA). Touch screens do not replace this: a phone still has switch and voice users.
Step 1. Choose the size of these three neighbouring buttons.
Press a button with a mouse or the keyboard.
- Keyboard: Tab moves forward, Shift+Tab back, Enter or Space activates. Real buttons and links do this free.
- Voice control: people say "click Save". That only works when the visible label and the accessible name match (WCAG 2.5.3).
- Dragging: if something can be dragged, offer a click alternative (WCAG 2.5.7).
4. Deaf and hard of hearing: never rely on one channel
Sound is not a channel you can assume. Captions, transcripts and visible error text carry the same information as audio. Sign languages are full languages, not a subtitle font. Never put the only instruction inside a video or a beep. The same idea works in reverse: a flashing colour alone fails blind and colour blind users. Use at least two channels.
Step 1. A form was saved. Switch on who is using it, then see which signals reach them.
| Signal | Reaches user? |
|---|
Good practice: captions on all video with speech (WCAG 1.2.2), a transcript for audio-only content (1.2.1), and status messages in text that a screen reader announces without moving focus (4.1.3). Lesson 20 covers live regions.
5. Cognitive load and calm design
Memory, attention and language processing vary from person to person, and everyone's gets worse when tired or stressed.
Help with plain labels, one task per step, predictable navigation, and no time limits you cannot justify (WCAG 2.2.1).
Patterns that rush, shame or hide the exit raise anxiety. Avoid fake urgency, confirm destructive actions in words, and respect
prefers-reduced-motion for people who feel sick from movement (WCAG 2.3.3).
Step 1. Compare two checkout nudges. Animation here stops if your system asks for reduced motion.
Common mistakes
| You see | Why it is a problem | Fix |
|---|---|---|
| Designing for an "average user" | Misses people with temporary, situational or permanent needs. | Test with keyboard, zoom, screen reader and reduced motion. |
<div> with no name or role | Silence in the accessibility tree. | Use real elements with names. |
| Red text as the only error cue | Invisible to colour blind and blind users. | Add an icon, the word "Error" and a text message. |
Text in px, zoom blocked | Low vision users cannot enlarge it. | Use rem, allow zoom, reflow. |
| Instructions only in a video or beep | Deaf users miss them. | Captions, transcript, text. |
| Countdown timers and hidden exits | Raise anxiety, block slower readers. | Remove or extend limits; show a clear way out. |
- Pick one screen you shipped. Name one barrier for a screen reader user, one for keyboard-only use, and one for someone using reduced motion.
- Press Ctrl/Cmd and + until the page is at 400%. Does anything overlap or need sideways scrolling?
- Put the mouse away and finish the main task with the keyboard only.
Remember
- Access needs can be permanent, temporary or situational.
- Screen readers use the accessibility tree: names, roles, states.
- Never rely on colour, sound or mouse alone. Offer a second way.
- Real controls, visible focus, rem sizing, captions and calm motion cover most barriers.