Low vision & tired eyes
Reading text that barely shows up
For someone with low vision, or anyone reading on a phone in daylight, pale text on a pale background is not a style choice. It is a paragraph they give up on. Turn on the colour-blind filter to watch the faint colours fade even further.
83.9%
of home pages have text that fails minimum contrast. It is the most common barrier on the web. WebAIM Million, February 2026
Broken version: intentionally inaccessible demo
Accessible version: the fix
The fix: Make the text dark enough to read. The accessible version uses colours that clear the 4.5:1 contrast rule, so the words stay legible in sunlight, on cheap screens, and for tired eyes.
Check your own colours with our free Contrast Checker →Screen reader users
Filling in a form you can’t see
A screen reader can only announce what is written in the code. With no labels, it reaches each box and just says “edit text”, so a blind user guesses what goes where, field after field, and hopes.
51.0%
of home pages have form fields with no programmatic label. Half the web asks for data it never names. WebAIM Million, February 2026
A screen reader announces (broken version)
Broken version: intentionally inaccessible demo
Accessible version: the fix
The fix: Give every field a visible label that stays put. Now the screen reader says each field’s name out loud, and any error message is tied to the field it belongs to.
Find issues like this for free with DevTools →Screen reader users
Shopping from images nobody described
You see four products. A blind shopper hears “image, image, image”, or a raw camera filename, and moves on with no idea what is for sale or that they just missed the thing they came for.
53.1%
of home pages have images with no alternative text. To a screen reader, over half the web is blank. WebAIM Million, February 2026
A screen reader announces (broken version)
Broken version: intentionally inaccessible demo
Accessible version: the fix
The fix: Write a short, useful description for every image that carries meaning, and hide the ones that are only decoration. Add real Previous and Next buttons and a pause button so nobody is rushed past a product.
See how the Control Center handles this →Keyboard-only users
Getting stuck with nowhere to tab
People who cannot use a mouse move through a page with the Tab key. When a menu traps focus and hides the highlight, they cannot tell where they are, and cannot get back out. Try it: Tab in, then try to leave.
~30%
is all an automated scan can reliably catch. Keyboard traps hide in the majority that only real testing finds. WebAIM & axe-core coverage analysis
Click into the demo, then press Tab / Shift+Tab to move. In the broken version you get stuck with no visible ring, so press Esc or the visible “Exit demo” button to leave safely.
Broken version: intentionally inaccessible demo
Accessible version: the fix
The fix: Let the Tab key move in and back out again, keep the Escape key working, and show a clear outline around whatever is focused. Now a keyboard user always knows where they are and can always get out.
Find issues like this for free with DevTools →Colour-blind users
Missing an error you can’t see
If the only sign a field is wrong is that it turned red, roughly 1 in 12 men never see it. They just get told to try again with no clue what changed. Turn on the colour-blind filter and watch the red disappear.
1 in 12
men (and 1 in 200 women) have a colour-vision deficiency. For them, red on grey is no signal at all. Colour Blind Awareness
Broken version: intentionally inaccessible demo
Accessible version: the fix
The fix: Do not rely on colour alone. Add an icon and a short message to each error, and mark the field invalid in the code so a screen reader reads the problem out loud.
Find issues like this for free with DevTools →Motion-sensitive users
A page that won’t hold still
For someone with a vestibular condition, a banner that slides and pulses on a loop is not lively. It is a wave of nausea and dizziness they cannot switch off. Many just close the tab and never come back.
35%
of adults over 40 have had a vestibular problem. Unstoppable motion can trigger nausea and migraine. Vestibular Disorders Association
Broken version: intentionally inaccessible demo
Accessible version: the fix
The fix: Start with the animation paused, give people a clear pause button, and respect the device’s reduce-motion setting. Nothing moves unless the visitor chooses to play it.
See how the Control Center handles this →What now?
Recognise any of these on your own site? Here’s how to deal with them.
Every barrier you just felt is a design decision, which means every one has a fix. It comes down to two steps: find where a page shuts people out, then close the gap for good.
Practise the repair
Turn these six barriers into 18 practical games.
The Accessibility Arcade is untimed, retry-friendly, and saves progress only in this browser.
Step 1 · Find them
Spot the barriers first
Our free browser DevTools scans any page for these exact issues, maps its structure, and simulates low vision and colour blindness, so you can see what’s broken before a single user has to.
Get the free DevTools →Step 2 · Fix them
Close the gap for good
The Accessibility Control Center is where fixes get made and stay made: structural remediation, ongoing monitoring, and expert audits in one place. No overlays, no one-click promises that don’t hold up.
Explore the Control Center →Not sure where to start? Talk it through with someone who does this every day.
Book a call with an expert