Advanced

Testing with real assistive technology

Automated audits find maybe a third of real problems. The rest are found by listening. A screen reader on your own page for ten minutes finds more than a linter with a perfect score.

What you will see

A dated log so the next release can be compared to this one.

About 1 min of reading

Try It

Run the six checks on one page

1

Tab walk

open the page and Tab until the cycle repeats

Before you run it, say out loud what it will print. Then open the answer.

What it prints
Every control reached, in visual order, with a visible ring.
2

Screen reader on one task

enable the OS screen reader and complete one form or one purchase

Before you run it, say out loud what it will print. Then open the answer.

What it prints
You hear a name for every control and the result of every action.
3

Zoom and CSS off

set the browser zoom to 200 percent, then reload with the stylesheet blocked

Before you run it, say out loud what it will print. Then open the answer.

What it prints
Text does not clip, and the unstyled page still reads in a sensible order.
4

Record the findings

printf 'a11y %s: %s\n' "$(date +%F)" "$FINDINGS" >> docs/a11y-log.md

Before you run it, say out loud what it will print. Then open the answer.

What it prints
A dated log so the next release can be compared to this one.
Do not ship with a known finding open. The log is not the fix; the fix is in the markup or the CSS.

Data Flow

Manual checks to a verdict
1 Tab walk finds traps and ghosts
↓
2 Screen reader finds missing names
↓
3 Zoom finds clipping
↓
4 CSS off finds order bugs
↓
5 Any failure blocks the release
Why this works
The short manual list

Tab walk, screen reader on one task, 200 percent zoom, CSS off, reduced motion on, high contrast mode on. Six checks, all under two minutes.

How to read a linter

Treat a clean linter report as necessary, not sufficient. It proves nothing about names that are technically present but useless, or about traps and ghosts.

Examples

Listen, do not skim

Turn on the OS screen reader and go through one task end to end. Note where you hear nothing, where you hear a filename, and where you cannot tell where you are.

Zoom to 200 percent

At 200 percent text zoom, nothing may clip or overlap. A layout that breaks at 200 percent is a failure even if it looks fine at 100.

Turn the CSS off

With CSS disabled the page must still be readable and in a sensible order. This is a one-second check that catches order bugs no linter reports.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← Keyboard paths through interactive regions
Previous Lesson
Keyboard paths through interactive regions
Next Lesson
The patterns worth memorizing
The patterns worth memorizing →