Skip to main content

Accessibility discovery

Find the returns number by ear

The scenario

You have bought a coat that does not fit. You are blind and you use a screen reader, so the page reaches you one announcement at a time, in order, with no way to skim. You need the returns phone number, and you need to know which of the two coats is the waterproof one.

Your task

  1. Step through the announcements one at a time. No skipping ahead, no reading the picture.
  2. Write down the returns phone number and which coat is waterproof.
  3. Open the links list, the way a screen reader user would to get their bearings, and see how much it tells you.
Time
10 minutes
Barrier
Missing alt text, meaningless link text and no headings
Success criterion
WCAG 2.2 — 1.1.1 Non-text Content and 2.4.4 Link Purpose

Coats and jackets

Version

What everyone else sees

The returns panel is a graphic, the way a lot of marketing panels are. There is no text in it.

What a screen reader has to work with

Not started

Press Next to start reading the page from the top.

This is a simplification. A real screen reader runs at two or three hundred words a minute, and an experienced user moves by heading, landmark and form field rather than one item at a time. That makes the broken page worse, not better: the shortcuts they rely on are exactly what is missing.

What this exercise is showing

Every piece of information a sighted visitor needs is on that page. Almost none of it is available in text:

  • The phone number is inside a graphic, with no alt text. It is not hard to find, it is not there. No amount of skill or patience recovers it.
  • The product photographs have filenames for alt text, so the only difference between the two coats — one is waterproof — never reaches the listener.
  • Every link says “Read more” or “Click here”, which is fine in a sentence and useless in a links list.
  • There are no headings, so there is no way to jump. You listen to all of it or none of it.
  • The basket is an icon button with no name, announced as “button”.

The fixed version changes no layout and no visual design at all. It is the same page with alt text, real link text, a heading structure and a phone number that is text and a tel: link. That is usually the honest answer to “how much work is this?”

Questions for the group

  • Who got the phone number? What did it feel like to realise it was unreachable rather than hidden?
  • What is in our product as an image of text — prices, offers, infographics, quotes, a slide deck exported as PNGs?
  • Look at our own links list. How many say “more”, “here”, “this page” or nothing at all?

What good looks like

  • Alt text describes the purpose of the image in that place, not the file. Decorative images take an empty alt="" so they are skipped.
  • Never put information in an image of text. If it must be an image, the alt text carries the words.
  • Link text makes sense read on its own, out of order and out of context.
  • Headings describe the structure honestly, in order, with one h1.
  • Icon-only buttons get an accessible name, and it matches any visible tooltip.