Good Citizens · Usability Harness · Simulator ·
Screen reader view: the page, read aloud in order
A screen reader turns a page into speech or braille, one thing after another. Nobody using one sees the layout; they hear its structure.
This tool is not a simulation of blindness. It shows what the tool itself would announce, in order, and the lists people use to jump around, with every problem marked.
I · Who uses one
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.
II · How it works
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 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. 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.
III · What goes wrong
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.
IV · What to do
What it means for your design
- 01
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).
- 02
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). - 03
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).
- 04
Label every field
A visible label tied to its field, not just a placeholder that disappears when people type (WCAG 3.3.2).
- 05
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).
- 06
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.
V · Prototypes
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.
VI · Myths
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.
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.
Works in Chrome, Safari, Firefox and Edge on a computer.
Or all 10 at once
Download the bookmarks fileOne Good Citizens folder with every tool in it. Download it, then import it:
- 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
Every time you check a design against the people who will use it, you are doing what Good Citizens is for. Thank you for that.
More tools: Fovea · Colour vision · Ageing eyes · all 10
VII · Sources
The research behind this page
Every figure above comes from one of these 9 sources. The small numbers in the text point here, and each source points back.
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