Screen reader view
Two in three screen reader users move through a long page by its headings.
Try it here
Press “Open the screen reader view”. A panel opens with this page in the order a screen reader reads it, with every problem marked.
Why should I care?
Without real headings and labels, a screen reader user can’t find their way around your page.
- 2.2 billionpeople live with a vision impairment.
- 9 in 10screen reader users use one on their phone.
- 2 in 3jump from heading to heading on a long page.
What to do on your website
- Give every picture a short description.
- Name every link and button in plain words.
- Use real headings, in order.
More, if you want it
Check your own website with this tool
This is the button you’ll drag.
- Make sure you can see your bookmarks bar, the row just under the address bar. If it isn’t there, press Ctrl + Shift + B, or ⌘ + Shift + B on a Mac.
- Drag the Screen reader view button up into that bar and let go.
- Open your own website and click Screen reader view in the bar. Click it on any page and a panel opens with the page as a screen reader lays it out: everything in reading order, the headings outline, landmarks, links, images and form fields, with problems marked. Click again to close it.
This works on a computer, in Chrome, Safari, Firefox or Edge. Phones and tablets have no bookmarks bar, so there are three other ways below.
On a phone or tablet
iPhone or iPad, from the Share button
- Copy the tool:
- Open the Shortcuts app, make a new shortcut, and add the action Run JavaScript on Web Page. Paste the tool in place of its sample script.
- In the shortcut’s details, turn on Show in Share Sheet, and name it Screen reader view.
- Once: in Settings, open Apps › Shortcuts › Advanced and turn on Allow Running Scripts.
- On your website in Safari, tap Share, then Screen reader view.
Android, from Chrome’s address bar
- Copy the tool:
- Bookmark any page with the star, then edit that bookmark: name it gc screen reader view and paste the tool in as its address.
- On your website, type gc screen reader view in the address bar and tap the starred bookmark it suggests. Choosing it from the bookmarks list won’t work.
Use it later, on a computer
Send yourself the link, or a reminder for tomorrow morning. Both are made on your phone and sent nowhere else.
Get all 10 tools in one go
One Good Citizens folder with every tool in it. Download the file, then bring it into your browser:
Download the bookmarks file- Chrome: Bookmarks › Import bookmarks and settings › Bookmarks HTML file
- Safari: File › Import From › Bookmarks HTML File
- Firefox: Bookmarks › Manage bookmarks › Import and Backup › Import Bookmarks from HTML
More free tools: Fovea, Color vision, Aging eyes, or all 10.
Why this matters
Imagine a neighbor who is blind looking up your opening hours. Their phone reads your page aloud, one thing after another, like someone reading it to them over the phone. They never see the layout; they hear its order.
A screen reader is the software that does this, in speech or braille. This tool is not a simulation of blindness. It shows what a screen reader would announce, in order, and the lists people use to jump around, with every problem marked.
Not only people who are blind
At least 2.2 billion people1 live with a vision impairment, and about a billion of those cases could have been prevented or have not yet been treated.
In WebAIM’s 2026 survey2 of 1,780 screen reader users, most were blind, but nearly one in five had low vision, and some had no disability at all: they were the testers and developers checking other people’s work. Nine in ten use a screen reader on their phone. People with dyslexia often use text-to-speech in the same way.
Asked whether the web is becoming more accessible, only a third said yes; nearly a quarter said it was getting worse.
Headings are the table of contents
On a long page, two in three screen reader users jump between the headings2 first, and nearly nine in ten find the levels useful.
Screen readers keep lists of a page’s headings, links, landmarks (its regions, such as the menu and the main content) and form fields, and people move through them with single keys. So a heading that is only bold text, a link that only says “read more”, or a button that is only an icon vanishes from those lists or turns into noise. If your “Book now” button is only an icon, then read aloud, it simply isn’t there. An image with no description at all is worse than one marked as decoration: some screen readers read out the file name5.
The first screen readers for personal computers came from IBM in the 1980s, led by Jim Thatcher. JAWS followed in 1995, Apple built VoiceOver into the Mac in 2005, and in 2006 Michael Curran began NVDA, a free screen reader that is now one of the most widely used.
Six problems, on most of the web
Every year WebAIM tests the home pages of the top million websites. In 2026, 95.9% failed4, with an average of 56 errors each.
Six kinds of problem made up 96% of them: low-contrast text, images with no description, form fields with no label, links with no text, buttons with no name, and pages that do not say what language they are in. All six are easy to fix, and all six are what this tool and the Good Citizens check look for. Pages that used more ARIA, the attributes added to make custom controls accessible, had more errors, not fewer.
All the advice, in full
Build a real outline
One h1 that says what the page is, then h2s and h3s in order with no skipped levels (WCAG 1.3.1, 2.4.6).
Describe images by what they do
Write alt text that does the image’s job on the page. Mark pure decoration with an empty
alt=""; never leave it out (WCAG 1.1.1).Name every link and button
Link text should make sense on its own. Icon buttons need an accessible name (WCAG 2.4.4, 4.1.2).
Label every field
A visible label tied to its field, not just a placeholder that disappears when people type (WCAG 3.3.2).
Say the language and the title
Set lang on the html element, and give every page a title that says what it is (WCAG 2.4.2).
Prefer HTML to ARIA
A real button, link or heading comes with everything a screen reader needs. Reach for ARIA only when no element will do.
On prototypes: once it is built
This tool reads the page’s structure, so it needs real text, headings and buttons. A Figma prototype is drawn as a picture, with nothing underneath to read, and the tool will say so rather than report nonsense.
It does work on prototypes built as real pages: Axure, UXPin and Justinmind exports, Framer and Webflow previews, Storybook stories, and apps generated by tools like Figma Make or v0. If the content sits in a frame from another site, the tool offers to open the frame on its own.
What people get wrong
- Screen reader users are all blind
- Nearly one in five has low vision, and many people use one to test, to read, or to rest their eyes.
- Landmarks are how people navigate
- They help, but only about 3% use them first. Headings are the main way people find their way around.
- A missing alt is harmless
- Some screen readers read out the file name instead. Decorative images need an empty alt, not no alt.
- More ARIA means more accessible
- Pages with more ARIA averaged more errors. Native HTML is usually the safer choice.
Where these numbers come from
Every figure on this page comes from one of these 9 sources. The small numbers in the text point here.
Data
Blindness and vision impairmentFact sheet
Survey
Screen Reader User Survey #11 results·
Survey
Screen Reader User Survey #10 results·
Report
The WebAIM Million·
Guidance
Decorative imagesWeb Accessibility Tutorials
Article
Remembering Jim Thatcher, accessibility pioneerReference
JAWS timelineReference
About NV AccessStandard
How to meet WCAG 2.2 (quick reference)Web Content Accessibility Guidelines 2.2