Screen Readers: Hearing the Page Instead of Seeing It

People who are blind, and many people with low vision, use a screen reader: software that reads the page aloud and lets them move around it with the keyboard, or with gestures on a phone. A screen reader can't see the page. It only knows what the HTML tells it: what each element is (a button, a link, a heading), what it's called, and what state it's in. On this page the demo apps are blacked out and a simulated screen reader tells you what's there. Every demo is missing some of that information.

WCAG 2.2, Success Criterion 4.1.2 (Name, Role, Value), Level A: For every user interface component, the name and role can be determined by software, and so can its states and values. When those change, assistive technologies such as screen readers are told.

How the simulation works

The demo apps start blurred, and the simulated screen reader starts off. Tick Simulated screen reader in the bar at the top to switch it on. The task and the answer buttons are never blurred.
The panel at the bottom of the window shows what a screen reader would say. Tick Speak aloud in the bar at the top to hear it too.
Tab and Shift+Tab move between buttons, links and form fields, as usual.
↓ and ↑ read the next or previous thing on the page, including plain text and images.
H jumps to the next heading and K to the next link (add Shift to go backwards). L reads out every link in the current demo.
When you're in a text box, the arrow keys move the text cursor. Press Esc to leave the box.
Do each task with the screen blurred or off. Then switch the screen to Visible and see what you missed.

The simulation is a simplified version of NVDA, a popular free screen reader for Windows. Real screen readers do much more. Below, you can find out how to try a real one.

Try a real screen reader

Every major operating system has a screen reader built in, and it works in your normal browser. Before you start one, switch this page's simulated screen reader off in the bar at the top, or you'll hear two voices and the keys will clash. Learn how to turn the screen reader off before you turn it on. Use headphones in a lab.

Windows: Narrator (built in)

Turn it on or off: Win+Ctrl+Enter.
The "Narrator key" is Caps Lock or Insert. In a browser, Narrator normally starts in scan mode. If the arrow keys don't read the page, press Narrator key + Space to turn scan mode on.
↓ / ↑: read the next or previous line. Tab: next control.
H: next heading. K: next link. Add Shift to go backwards.
Enter or Space: activate. Ctrl: stop talking.

Windows: NVDA (free download, widely used)

Download it from nvaccess.org. If you can't install software in the lab, the installer can also create a portable copy on a USB stick.
Start: Ctrl+Alt+N. Quit: Insert+Q. The "NVDA key" is Insert.
↓ / ↑: read the next or previous line. Tab: next control.
H: next heading. K: next link. F: next form field. B: next button. G: next image.
Insert+F7: list every heading, link or landmark on the page.
When you land in a text box NVDA switches to "focus mode", so your keys type. Esc switches back.
Ctrl: stop talking.
For a class, open the NVDA menu (Insert+N) › Tools › Speech viewer. It shows everything NVDA says as text, so the room can follow on the projector.

Mac: VoiceOver (built in)

Turn it on or off: Cmd+F5. VoiceOver works best in Safari.
The "VO keys" are Ctrl+Option, held together.
VO+→ / VO+←: next or previous item. VO+Space: activate. VO+A: read from here.
VO+U opens the rotor, a list of headings, links and form controls. Use ← / → to choose a list and ↑ / ↓ to pick an item.
VO+Cmd+H: next heading. Ctrl: stop talking.
For Tab to reach links in Safari, tick Settings › Advanced › "Press Tab to highlight each item on a webpage".
The caption panel at the bottom of the screen shows what VoiceOver is saying.

Chromebook: ChromeVox (built in)

Turn it on or off: Ctrl+Alt+Z.
Search+→ / ←: next or previous item. Tab: next control. Ctrl: stop talking.

Phones: VoiceOver (iPhone) and TalkBack (Android)

iPhone: Settings › Accessibility › VoiceOver. Set Accessibility Shortcut to VoiceOver first, so a triple-click of the side button turns it off again.
Android: Settings › Accessibility › TalkBack. Holding both volume keys for 3 seconds usually toggles it.
Both: tap to hear something, swipe right or left to move to the next or previous item, double-tap anywhere to activate. Normal scrolling needs two fingers (iPhone: three).

Browser developer tools: see what the screen reader sees

Chrome and Edge: open DevTools (F12), select an element in the Elements panel, then open the Accessibility tab. It shows the element's computed Name and Role, and you can switch on the full-page accessibility tree.
Firefox: DevTools has an Accessibility tab with the accessibility tree and a "Check for issues" option.
Try it on demo 2 below: every button has role "button" and an empty name.

Images

1. Jacket sale

Task: find out which jacket is half price.

Trail jacket

€120

City jacket

€120

Storm jacket

€120

Which one is half price?

The "Half price" label is part of the photo, and the photos have no useful alt text. The first and third have no alt at all, so the screen reader falls back to reading the file name. The second has alt="product image", which is no better. The price in the text says €120 for all three. WCAG 1.1.1 (Non-text Content, Level A): every image that carries information needs a text alternative that gives the same information.

Icon buttons

2. Music player

Task: turn shuffle on, without changing anything else.

Now playing:

Each button contains only an SVG icon, with no text, no aria-label and no <title>. The screen reader can tell you it's a button, but not what it does, so all six sound the same: "button". Even after you find shuffle, nothing tells you whether it's on or off, because the state is shown only by colour.

Form labels

3. Delivery details

Task: type the Eircode R93 V960 into the Eircode box, then press Continue.

Full name

Phone

Eircode

Delivery note

Continue

The words "Full name", "Phone" and so on are plain text placed next to the boxes, not <label> elements, so each box is announced only as "edit text, blank". You can work out which is which by reading line by line with the arrow keys, but not by tabbing. The Continue "button" is a <div> with a click handler. Tab skips it, and when you read it with the arrows it sounds like ordinary text. Some screen readers can click it anyway, but nothing tells you it's clickable. WCAG 1.3.1 (Info and Relationships) and 4.1.2 (Name, Role, Value), both Level A.

Status messages

4. Create an account

Task: create an account with any email address and the password cat. Did it work?

What happened?

This form is labelled properly, but when you press the button the message just appears on screen, in red, below the button. Focus stays where it was and the message isn't in a live region, so the screen reader says nothing. The only clue is the red border on the password box, and colour isn't announced either. WCAG 4.1.3 (Status Messages, Level AA) and 3.3.1 (Error Identification, Level A).

Headings and links

5. Help centre

Task: open the full returns policy. Try H to jump between headings and L to list the links.

Help centre

Delivery

We deliver Monday to Saturday. Orders placed before 2pm usually arrive the next working day.

Large items such as furniture are delivered by our own drivers. Read more

Payments

We accept all major cards, PayPal and gift vouchers. Your card is charged when your order is dispatched.

To pay in instalments, click here.

Returns

Changed your mind? You can send most items back within 30 days for a full refund.

Some items, such as earrings and opened software, can't be returned. Read more

Our team is available by phone and chat from 9am to 6pm, Monday to Friday. More info

The headings only look like headings: they're <div>s with large bold text. Screen reader users often skim a page by jumping from heading to heading, and here there are none to jump to. The links say "Read more", "click here" and "More info". Listed on their own, as screen readers can do, they're meaningless, and two of them are identical. WCAG 1.3.1 (Info and Relationships, Level A), 2.4.4 (Link Purpose (In Context), Level A) and 2.4.6 (Headings and Labels, Level AA).

The fix

Give everything a name, a role and a state

Here are the same pieces rebuilt. Keep the screen blurred or off and try them with Tab, the arrow keys, H and L.

Storm jacket

Was €120, now €60

Music player

Now playing:

Delivery details

Returns

Changed your mind? You can send most items back within 30 days. Read the full returns policy

What changed, and what else you can do:

Alt text: describe what the image tells a sighted user. Better still, put important information such as a sale price in real text. Use alt="" for purely decorative images so they're skipped.
Icon buttons: give them an aria-label (or visually hidden text), and hide the icon itself with aria-hidden="true".
State: use aria-pressed for toggle buttons and aria-expanded for things that open and close, and keep them up to date.
Labels: connect every form field to a <label>. Placeholder text is not a label.
Real elements: use <button> for actions and <a href> for navigation, not clickable <div>s.
Announce changes: put error and status messages in a live region (role="alert" or role="status"), or move focus to them. Mark invalid fields with aria-invalid="true".
Structure: use real <h1>–<h6> headings in a sensible order, and landmarks such as <nav> and <main>.
Links: make the link text make sense on its own. "Read the full returns policy", not "Read more".
Test it: the browser's accessibility inspector shows the name and role of every element. Then try a real screen reader.