How Screen Readers See Websites and Why It Matters for Everyone

A screen reader turns what's on a screen into speech or braille. People who are blind or have low vision use one to browse, along with some people with dyslexia or other reading difficulties. How a screen reader "sees" a web page explains a lot about what makes websites work well for everyone.

The main screen readers

• JAWS: a paid Windows screen reader, long used in workplaces.
• NVDA: free and open source, for Windows.
• VoiceOver: built into Macs, iPhones and iPads.
• TalkBack: built into Android.
• Narrator: built into Windows.

What a screen reader actually reads

It doesn't look at the page as you see it. The browser builds an accessibility tree from the page's code: headings, links, buttons, form fields, images and their text alternatives, with each item's name and role. The screen reader reads that tree. A button that looks like a button but is coded as plain text is invisible as a button.

You can see the tree yourself in Chrome DevTools, in the Accessibility pane of the Elements panel.

How people navigate

Screen reader users rarely listen to a page from top to bottom. They jump around:

• By headings: pressing H in NVDA or JAWS moves to the next heading. WebAIM's surveys of screen reader users have found this is the most common way to find information on a long page.
• By landmarks: main content, navigation, search, footer.
• By links or form fields: lists of every link or field on the page.

What breaks the experience

• Images without text alternatives. See alt text.
• Text styled to look like headings but not coded as headings.
• Links that say only "click here" or "read more".
• Form fields without labels. See accessible forms.
• Pop-ups that trap focus or appear without warning.
• Buttons built from plain elements with no role or name.

Why it matters for everyone

The same structure that helps screen readers also helps keyboard users, reader modes, voice assistants, search engines and AI tools that read pages. Clear headings and descriptive links make pages easier for everyone to scan.

Try it yourself

1. Turn on VoiceOver (Cmd + F5 on a Mac) or install NVDA on Windows.
2. Close your eyes and try to find a specific piece of information on a site you use.
3. Try navigating by headings only.

Moving through a page one piece at a time is a little like ADHD Reading Focus, which shows one paragraph at a time. See testing a site for accessibility.