Screen readers do not read a page the way a sighted visitor scans it. They announce elements in order, jump between headings, list every link on the page, and describe images through whatever text the author supplied. Content that relies on position, colour, or a clever layout can become nonsense when it is spoken aloud.

Most of the fixes are writing decisions, not development work. They also tend to improve the page for everyone else, which is the useful part.

Understand what gets announced

A screen reader user often navigates by heading list, then by link list, then by reading the sections that sound relevant. That means your headings and link text are doing the work that design does for sighted readers.

If headings are styled paragraphs, the page has no outline. If links all say read more, the link list is useless. If an image carries information and has no description, that information is simply absent.

Use headings in order, for structure

One h1 per page, then h2 for main sections, then h3 within them. Do not skip from h2 to h4 because the size looked better. Visual size is a styling decision; heading level is a structural one.

Write headings that describe the section on their own. A heading like More or Things to know tells a listener nothing when read out of context in a list. Pricing for small teams does.

Do not use a heading just to make text bold. If it is not a section, it is a paragraph with emphasis.

Write link text that works alone

Link text should describe the destination. Download the VAT template is useful in a list of forty links. Click here is not, because the listener hears forty identical entries.

If a design requires a generic label, add context in the sentence or through an accessible label. Avoid opening links in new tabs without saying so, since unexpected context changes confuse people using keyboards and screen readers alike.

Describe images by purpose

Alt text is not a caption and not a keyword field. It should convey what the image communicates in context. A photograph of a team adds atmosphere; alt text can say the team at work in the Bristol workshop. A chart needs the finding, not the colours.

Decorative images get empty alt attributes so they are skipped. Text inside an image is a problem: it cannot be read, resized, or translated, so repeat it in the body copy or replace the image with text.

If the page makes sense with the images removed, the alt text is probably doing its job.

Keep sentences readable aloud

Short sentences and short paragraphs help everyone, and they help listeners more. Avoid constructions that depend on visual layout: the box on the right, the green button below, see the table opposite.

Refer to elements by name instead. Use the Download invoice button. In the Delivery section. This also makes the copy work when the page reflows on a phone, where nothing is on the right.

Avoid using symbols as words. An ampersand, an arrow, or a slash may be read aloud in unhelpful ways. Write and, to, or per.

Structure lists and tables properly

Use real list markup rather than lines beginning with a dash, so the reader announces the number of items and the list position. For steps, use an ordered list.

Tables need a header row and a caption that says what the table shows. Do not use a table for layout. A screen reader will announce it as data, and the listener will hear a grid of unrelated phrases.

Write form labels and errors for ears

Every field needs a label that stays visible, not a placeholder that disappears when typing starts. Describe the expected format in the label or the hint: Date of birth, day month year.

Error messages should identify the field and the fix in words. The postcode field needs a space in the middle, for example. Do not rely on a red border alone, and do not put all errors in a summary at the top without linking them to the fields.

  • One h1, headings in sequence
  • Headings meaningful out of context
  • Link text describing the destination
  • Alt text for informative images, empty for decorative
  • No information that exists only in an image
  • No directions that depend on position
  • Real list and table markup
  • Visible labels and specific error messages

Then test the page with a screen reader for ten minutes. You will hear the structure you actually built, which is often not the one you thought you wrote.