Skip to main content

What Screen Readers Actually Announce

Most devs guess what screen readers do. Here’s how to test it for real, and what surprised me.

If you’ve never tested your site with a screen reader, you’re flying blind.

You might assume it reads top to bottom, says everything on the page, and makes ARIA sound clever. But that’s not how it works.

Why I Use a Screen Reader

If I’m building something for people who can’t see the screen, I need to know what they actually hear.

You’d be surprised how different the experience is. A page that looks fine visually can be a nightmare to navigate with sound alone.

What Is NVDA?

NVDA (NonVisual Desktop Access) is a free screen reader for Windows.

It reads out loud whatever’s on the screen, headings, links, buttons, errors, and more. You control it using the keyboard, and it follows the flow of your HTML.

If you’re on a Mac, VoiceOver’s already built in. I still prefer NVDA. It’s what most people actually use, it’s easier to learn, and works well in Firefox or Chrome. I test using [ View ] so I can hear things clearly, like a real user would.

How to Use NVDA (Quick Start)

Once it’s installed:

  1. Press Ctrl + Alt + N to launch it.
  2. Open your site in Firefox or Chrome.
  3. Use these keys to explore:
    • Tab: move through links and buttons
    • H: jump through headings
    • 1 to 6: go to specific heading levels
    • D: jump between landmarks (main, nav, footer)
    • Insert + ↓: read from current point
  4. Press Insert + Q to quit NVDA

Tip: Use speakers if you can, it’s good for empathy when others hear what’s going on.

What I Actually Test

1. Headings and Structure

  • Are heading levels used properly?
  • Is the layout clear when using H, 1–6, or D?
  • Can I build a mental model of the page without seeing it?

If not, I’ve probably messed something up in the HTML.

Every clickable thing should:

  • Be focusable with the keyboard
  • Have a clear label (either visible or aria-label)
  • Actually say what it does

Bad:

<button><svg><!-- icon --></svg></button>

Better:

<button aria-label="Download PDF">
  <svg><!-- icon --></svg>
</button>

Without the label, the screen reader skips right past it, users won’t even know the button exists.

3. Alerts and Live Updates

Use role="alert" and aria-live for anything that appears dynamically, like save confirmations or error messages.

Example:

<div role="alert" aria-live="assertive">
  <span class="sr-only">Success:</span>
  <span aria-hidden="true">&#9989;</span>
  <span>Profile saved</span>
</div>

The emoji adds a visual cue but is hidden from screen readers. The message gets read out as soon as it appears.

Why This Matters

You could have a perfect-looking page, but if none of the interactive bits speak, it’s useless to someone using assistive tech.

Doing a quick test before you ship can catch the worst issues early. And once you get the hang of it, it only takes five minutes.

Final Note

If you’ve never listened to your own UI, give it a go. It’s awkward at first, but eye-opening. You’ll start writing better HTML without even thinking about it.