ResourcesHow people use the web
How screen readers work
Quick answer
A screen reader is software that turns what's on the screen into speech or braille. It doesn't read the pixels. It reads the text, names, roles and states that your site's code gives the browser, one item at a time.
Facts last checked
From code to speech
Your code
The HTML says what each thing is: a heading, a link, a button.
The browser
It builds an accessibility tree, which lists each item's name, role and state.
The operating system
A built-in channel, called an accessibility API, passes the tree to the screen reader.
The screen reader
It turns each item into speech or braille, one item at a time.
What gets announced
Most items have a name and a role, and some have a state.
- Name
- Role
- edit
- State
- required
What a screen reader says
Move through this small page with Previous and Next. The exact words change from one screen reader to the next.
Item 1 of 8
- Name
- “Book a visit”
- Role
- heading level 1
The WCAG rule behind this4.1.2 Name, Role, Value (Level A) asks that software can read the name and role of every control.
How people move around
Screen reader users skim too. The figures here are from WebAIM's 2026 survey, which had 1,780 responses. Its sample was not controlled, so they are shares of respondents.
- Jump through the headings: 67.8%
- Use the Find feature: 12.5%
- Read through the page: 9.7%
- Jump through the links: 6.7%
- Jump through landmarks or regions: 3.4%
Source: WebAIM Screen Reader User Survey #11, 2026
88.3%
of respondents find heading levels very or somewhat useful.
WebAIM survey, 2026
37.7%
of respondents use skip links always or often.
WebAIM survey, 2026
28.3%
of respondents use landmarks often, or whenever they're available.
WebAIM survey, 2026
With real headings
- Level 1Book a visit
- Level 2Treatments
- Level 3Facials
- Level 3Laser hair removal
- Level 2Prices
- Level 2Find us
With bold text instead of headings
No headings found
The page can look the same in both cases. Only the code differs.
- Header: banner
- Menu: navigation
- Main content: main
- Footer: content information
A screen reader can list these regions and jump straight to one. The small type is the name it reads out.
| Jump to the next | NVDA | JAWS |
|---|---|---|
| Heading | H | H |
| Link | K | U for unvisited, V for visited |
| Landmark or region | D | R |
| Form field | F | F |
| Button | B | B |
| Table | T | T |
Source: NV Access, NVDA User Guide; Freedom Scientific, JAWS Hotkeys
Going back, and VoiceOverAdd Shift to any of these keys to move back. VoiceOver on a Mac works differently: people press Control + Option + U to open the rotor, then pick a list such as Headings.
Which screen readers people use
From the same survey.
- JAWS: 55.0%
- NVDA: 32.9%
- VoiceOver: 6.5%
- ZoomText or Fusion: 2.1%
- Orca: 1.4%
Source: WebAIM Screen Reader User Survey #11, 2026. Answers under 1% and "Other" are not shown.
91.8%
of respondents use a screen reader on a mobile device.
WebAIM survey, 2026
73.3%
of respondents name an iPhone, iPad or iPod touch as their main mobile platform.
WebAIM survey, 2026
24.0%
of respondents name Android as their main mobile platform.
WebAIM survey, 2026
| Screen reader | Browser | Device |
|---|---|---|
| JAWS | Chrome | Windows |
| NVDA | Firefox | Windows |
| VoiceOver | Safari | Mac |
| VoiceOver | Safari | iPhone |
| TalkBack | Chrome | Android |
What breaks it
Six causes we look for, and one of the fixes.
Images with no text alternative
The screen reader skips the image and says nothing. If the image is a link, it may read out the file name.
Buttons that are really divs
A div with a click handler has no role, so it is never announced as a button.
Form fields with no label
The field is announced by its role alone, such as "edit", so people have to guess what to type.
Headings that are only big bold text
They look like headings, but they aren't announced as headings, and the H key skips them.
Changes that are never announced
An error message or a new cart total shows on screen, and the screen reader says nothing.
Links that don't say where they go
A list of links that all say "Read more" makes no sense out of context.
Removed: Email <input type="email">
Added: <label>Email <input type="email"></label>
A label ties the text to the field, so the field is announced with its name, "Email", and its role.
| Problem | Rank |
|---|---|
| CAPTCHA images | 1 |
| Menus, tabs and dialogs that don't behave as expected | 2 |
| Links or buttons that don't make sense | 3 |
| Screens that change unexpectedly | 4 |
| Lack of keyboard access | 5 |
Source: WebAIM Screen Reader User Survey #10, 2023 to 2024. Top 5 of 12 items.
Sources
- MDN Web Docs, Glossary: Accessibility tree (2025)
- W3C WAI, Tools and Techniques: Perception (accessed 2026)
- WebAIM, Designing for Screen Reader Compatibility (accessed 2026)
- W3C, WCAG 2.2, Success Criterion 4.1.2: Name, Role, Value (2024)
- WebAIM, Screen Reader User Survey #11 (2026)
- NV Access, NVDA 2026.2 User Guide (2026)
- Freedom Scientific, JAWS Hotkeys (accessed 2026)
- Apple, VoiceOver User Guide: Use the VoiceOver rotor on Mac (accessed 2026)
- WebAIM, Screen Reader User Survey #10 (2024)
We provide technical accessibility services, not legal advice.
More guides
Who web accessibility is for
Who benefits from an accessible website: the numbers, the types of disability, the tools people use and what each group needs from a site.
Keyboard access and focus
How people use a website with only a keyboard, what WCAG 2.2 asks for, and a quick check you can run on your own site.
Color contrast, explained
What a contrast ratio is, the ratios WCAG 2.2 asks for, and how to check and fix your own colors.
Start with a free snapshot.
Tell us your website. We'll run an automated check of up to 10 key pages and walk you through what we found. It's an automated check that finds only some issues, not an audit.
Get a free snapshot