Website Builder Studio
Learn

What your page sounds like when it is read aloud

A screen reader turns your page into speech, in order, one element at a time. Most of what makes a page work for that reader is structure you cannot see.

Short answer

A screen reader friendly page has real headings in order, labeled controls, described images, and link text that stands alone. Landmarks let a reader jump to the main content. Anything built to look like a control without being one goes unannounced. The structure that makes speech work is the same structure search engines read.

It is linear, and it is fast

Sighted readers take a page in at a glance and jump to what they want. Speech has no glance. It runs in order, and experienced users run it much faster than you would find comfortable.

So the value is in shortcuts. Headings, landmarks, lists and links are all things a reader can jump between. A page with none of that structure has to be listened to from the top every single time.

Experienced users often run speech at two or three times the rate you would find comfortable, which is worth knowing before assuming somebody will sit through a long introduction to reach your phone number.

Landmarks, the regions of a page

A page has parts: a banner, the navigation, the main content, the footer. When those are marked as real regions, a reader can move straight to the main content and skip everything repeated on every page.

When they are not, your menu is read out in full on arrival at each page. That is the difference between a site someone will use twice and one they abandon.

A skip link does the same job with one keystroke, and the two together are the difference between a site somebody will use twice and one they leave.

What turns into noise

Decorative images with no empty alt are read out as file names. Layout built from tables gets announced as a table with rows and columns. Icons announce nothing at all.

Then there are the things that never stop. Sliders that advance on their own interrupt whatever was being read. A popup that steals focus cuts a sentence off mid word. If it would annoy you in a phone call, it is worse in speech.

  • Decorative images with no empty alt, read out as file names
  • Layout built from tables, announced as a grid with rows and columns
  • Icon buttons with no label, announced as button and nothing else
  • Sliders that advance on their own, interrupting whatever was being read
  • Popups that steal focus mid-sentence
  • The same menu read out in full on arrival at every page

Say things once

A common mistake is describing an icon that sits beside the word it illustrates, so the reader hears phone phone. Another is a link wrapping both an image and its caption, which announces the same thing twice.

Aim for one clear announcement per thing. If the text already says it, let the picture be decorative.

Announcing things that change

Modern pages update without reloading. A filter narrows a list, a message appears, a total recalculates. None of that is announced unless somebody asks for it to be.

For a small business site the fix is usually to avoid the situation. If submitting a form loads a real confirmation page, there is nothing to announce, because the page change speaks for itself.

Where content does update in place, the region holding it needs to be marked as live, and the message needs to say what happened rather than just appearing.

Test it yourself for five minutes

Every major operating system includes a screen reader, and you already own one. Turn it on, close your eyes, and try to find your own phone number.

It is uncomfortable and it is the fastest education available. You will hear your own menu, your own unlabeled buttons, and the point at which you would have given up.

Pick a real task rather than browsing. Find the price, book an appointment, or get the address. A task has a finish line, and the point at which you would have given up is the finding.

What the builder does, and where you come in

Pages here are built from real headings, real landmarks, real links and labeled fields, so speech gets something to work with. Every page passes a check that runs before anything publishes, validated against Google Search Essentials and modern web standards.

No automated check can tell you whether the page makes sense aloud. That needs a person listening, and five minutes of it will teach you more than any report.

The same structure serves answer engines

Everything on this page is structure: headings in order, real landmarks, described images, links that name their destination. That is exactly what a machine reads when it tries to understand a page without seeing it.

An answer engine is in the same position as a screen reader. It has the markup and the words, and nothing else. A page built to be heard is already built to be quoted.

So this work is not a separate accessibility project bolted on at the end. It is the same work that makes a page genuinely useful to search.

That is not a coincidence or a happy accident. Both arrive with the markup and the words and nothing else, which is set out in where accessibility and SEO agree.

Questions people ask

Do I need to buy screen reader software to test?

No. Windows and macOS both include one at no charge, and phones have them built in. Turning yours on for five minutes is the cheapest audit there is.

Does a separate accessible version help?

A parallel text-only site tends to fall out of date and split your effort. One page that works for everyone is easier to maintain and better for search.

Are captions read out?

Image captions are ordinary text, so yes. That is why a caption and alt text should not repeat each other word for word.

What about PDFs?

A PDF made by exporting a design is often unreadable aloud. If the information matters, put it on a real page and offer the file as an extra.

See your website built from a conversation

15-day free trial. Card required. Cancel before day 15 and you pay nothing.

Build my website
Every plan starts with a 15-day free trial. Card required.See plans and pricing