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

9 in 10use one on a phonereading: “heading two”reading: “link home”reading: “button send”
A refreshable braille display raises pins, cell by cell, for the line being read. Most screen reader users also use one on a phone.

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

2 in 3jump by headingsH1H2H2H3“heading 1, Screen reader view”“heading 2, Who uses one”“heading 2, How it works”“heading 3, Headings”
A screen reader keeps a list of the headings, and most people jump straight from one to the next.

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

95.9%of home pages failedcontrast83.9%alt text53.1%labels51%links46.3%buttons30.6%language13.5%
Six kinds of problem, sorted: the share of the top million home pages with each one (WebAIM Million, 2026).

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

  1. 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).

  2. IMG_2041.jpg
    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).

  3. buttonSend
    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).

  4. 04

    Label every field

    A visible label tied to its field, not just a placeholder that disappears when people type (WCAG 3.3.2).

  5. lang="en"
    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).

  6. roleariatabindex
    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

drawn as a picturenothing to readbuilt as a pagea frame: open it on its own

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.

Take it to any website

🗣️ Screen reader view

↑ Drag it to your bookmarks 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.

Works in Chrome, Safari, Firefox and Edge on a computer.

One 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.

  1. Data

    Blindness and vision impairment

    World Health Organization

    Fact sheet

    who.int · cited in I

  2. Survey

    Screen Reader User Survey #11 results

    WebAIM ·

    webaim.org · cited in I, II

  3. Survey

    Screen Reader User Survey #10 results

    WebAIM ·

    webaim.org

  4. Report

    The WebAIM Million

    WebAIM ·

    webaim.org · cited in III

  5. Guidance

    Decorative images

    W3C

    Web Accessibility Tutorials

    w3.org · cited in II

  6. Article

    Remembering Jim Thatcher, accessibility pioneer

    TPGi

    tpgi.com

  7. Reference

    JAWS timeline

    Vispero

    vispero.com

  8. Reference

    About NV Access

    NV Access

    nvaccess.org

  9. Standard

    How to meet WCAG 2.2 (quick reference)

    W3C

    Web Content Accessibility Guidelines 2.2

    w3.org