Screen Reader: How It Reads Websites and What It Needs
Also called: Screenreader, Screen reading software, Text-to-speech for blind users
Definition
A screen reader is assistive software that reads the content and controls of a screen aloud or outputs them on a braille display. It relies on the names, roles and states that a website exposes through the browser's accessibility tree.
A screen reader is software that reads what is on the screen aloud or sends it to a braille display. Blind people and many people with low vision use a screen reader to read websites, fill in forms and shop online – entirely with the keyboard or with touch gestures. It can only announce what the website's code tells it, so missing names and roles leave its users stuck.
What it means
W3C describes screen readers as one kind of assistive technology: tools that let people who are blind read text through speech or braille. A screen reader does not look at your design. It reads the accessibility tree that the browser builds from your HTML – every element with its name, role and state, such as "Add to cart, button" or "Newsletter, checkbox, not checked".
That is why WCAG 4.1.2 Name, Role, Value, a Level A criterion of WCAG 2.2, matters so much. It requires that name and role of every user interface component can be programmatically determined, and that states and changes are available to assistive technologies. Native HTML controls do this on their own. Custom controls built from div and span need extra work, usually with ARIA.
| Screen reader | Platform | Cost |
|---|---|---|
| VoiceOver | macOS, iOS, iPadOS | Built in |
| TalkBack | Android | Built in |
| Narrator | Windows | Built in |
| NVDA | Windows | Free, open source |
| JAWS | Windows | Paid |
Screen reader users rarely read a page from top to bottom. They jump between headings, landmarks, links and form fields. A clean heading structure and clear names make that fast; a page of unnamed icons and "click here" links makes it slow.
Examples
<!-- Not announced as a button – the user cannot tell what it does -->
<div class="icon-cart" onclick="openCart()"></div>
<!-- Announced as "Shopping cart, 3 items, button" -->
<button type="button" aria-label="Shopping cart, 3 items">
<svg aria-hidden="true">…</svg>
</button>
<!-- Announced in the right voice because the language is set -->
<html lang="en">Use native HTML elements (button, a, label, h1–h6, nav, main). Give images meaningful alt text and hide purely decorative icons with aria-hidden="true". Announce status messages such as "Added to cart".
Build controls from plain div elements, put important text only in images, rely on color or position ("click the green button on the right") or hide focusable elements with aria-hidden.
How to test with a screen reader
Questions
Who uses a screen reader?
Mostly blind people and people with severe low vision, but also some people with dyslexia or cognitive disabilities who prefer listening to reading.
Which screen reader should I test with?
Test with what your visitors use: NVDA or JAWS with Chrome or Firefox on Windows, VoiceOver with Safari on Apple devices, TalkBack on Android. One desktop and one mobile screen reader cover most problems.
Does a screen reader read images?
Only through their alt text. Without it, it announces the file name or skips the image. Decorative images should have an empty alt="" so they are skipped on purpose.
How do I find screen reader problems without testing manually?
Automated checks find a large share of the technical causes – missing names, missing alt text, missing language. The free WCAG scanner checks your homepage against WCAG 2.2 AA; a manual test then shows whether the page also makes sense when heard.
Related terms
Accessible Name: What It Is and How It Is Computed
The accessible name is the text that browsers pass to assistive technology to identify an element – for example the words a screen reader announces for a button, link or form field. WCAG 4.1.2 requires a programmatically determinable name for every user interface component.
Read definition: Accessible Name: What It Is and How It Is ComputedARIA: Roles, States and Properties Explained
ARIA (WAI-ARIA, Accessible Rich Internet Applications) is a W3C specification of HTML attributes – roles, states and properties – that tell assistive technology what a custom element is, what it is called and what state it is in.
Read definition: ARIA: Roles, States and Properties ExplainedAlt text
Alt text is a short written description of an image. Screen readers read it aloud, and browsers show it when the image can't load – so people who can't see the image still get its meaning.
Read definition: Alt textARIA Landmarks: Page Regions for Screen Readers
ARIA landmarks are roles such as banner, navigation, main and contentinfo that identify the large regions of a page. Screen readers list them and let users jump directly to each region.
Read definition: ARIA Landmarks: Page Regions for Screen Readers