How does a screen reader describe a webpage?

1. Sam is blind and loves the Pond Club website. Sam cannot see the screen, so a program called a screen reader turns the page into speech. But how does it know what to say, and in what order?
2. Behind the picture you see, every page is built from labeled pieces. The code says: this is a heading, this is a paragraph, this is an image, this is a link, this is a button. The screen reader reads those hidden labels.
3. The screen reader moves through the pieces in order, like a finger following the page. For each one it says what kind of thing it is and then reads it: Heading, Pond Club. Sam presses a key to hear the next piece.
4. Listening to every piece would take a long time. So Sam presses one key to jump from heading to heading, like running a finger down the titles in a book. Another key jumps from link to link.
5. A screen reader cannot see what is in a picture. The person who made the page writes a short description, called alt text. Then Sam hears: image, a green frog sitting on a lily pad. With no description, Sam hears only: image.
6. With clear headings, link names and picture descriptions, Sam finds the frog songs in seconds. A braille display can show the same words as raised dots. Pages built this way are easier for everyone to use.

This is the Pond Club page and the tools Sam uses to hear it. Tap each part.

• Heading. A title for a part of the page. Screen reader users jump from heading to heading to find what they want, like using a table of contents.
• Link. Words that take you to another page. The screen reader says the word link and then the link's name, so the name has to make sense by itself.
• Image description. Hidden words, called alt text, that say what a picture shows. The screen reader reads them out, because it cannot see the picture.
• Button. A control that does something, like joining the club. The screen reader says button and its name, and Sam presses Enter to use it.
• Reading position. The frame shows which piece the screen reader is on. Sam cannot see it, but it helps sighted friends follow along.
• Voice. A speech synthesizer turns the text into spoken words. Sam can change the voice and make it talk faster or slower.
• Keyboard. Sam uses keys instead of a mouse: one for the next item, one for the next heading, one for the next link, and Enter to press a button.
• Braille display. A row of tiny pins that pop up to make braille letters. Sam can read the same words by touch, quietly.

Press Next item to hear the page piece by piece. Then try jumping by heading and by link. Count the key presses.

Experiment: Sam wants to get to the Ducks part of the page. Which way takes fewer key presses?

1. Press Back to the top. Press Next item until you hear Ducks. Count the presses.
2. Go back to the top. Now press Next heading until you hear Ducks.
3. Compare the two counts.

What we found: From the top, Ducks is 8 presses away item by item, but only 3 presses away by heading. Headings let Sam skim a page by ear.

Turn on JavaScript to try it yourself.

The screen is off, just as Sam uses it. Find the link called Feed the ducks and press Enter. Use as few key presses as you can.

A screen reader is a program that reads a computer or phone screen out loud. People who are blind or have low vision use it to browse the web, write messages, do homework and play games. It comes built into most phones, tablets and computers, so you may already have one.

A screen reader does not look at the screen the way your eyes do. Behind every web page is code, and good code labels each piece: this is a heading, this is a paragraph, this is a link, this is a button, this is an image. The screen reader reads those labels. That is how it can say 'Heading, Pond Club' or 'Link, Frog songs', and how it knows which key should jump where.

Because of those labels, a person can move around a page by ear. One key reads the next item. Another jumps to the next heading, which is like skimming the titles. Another jumps from link to link. Pictures are different: a computer voice cannot tell what a photo shows, so the person who made the page writes a short description called alt text. If they forget, the listener just hears 'image'.

So whether a page works for Sam depends on the people who build it. Clear headings, links whose names make sense, and described pictures make the page easy to hear. They also help everyone else: search engines, people using voice control, and anyone whose pictures will not load. Our newspaper comparison is not perfect, because a screen reader also lets you press buttons, fill in forms and type, not just listen.

Key words

Screen reader

A program that reads what is on a screen out loud, or sends it to a braille display.

Heading

A title for a part of a page, marked in the code so that people can jump to it.

Alt text

A short written description of a picture, read out in place of the picture.

Role

What a piece of a page is: a heading, a link, a button, an image.

Accessible name

What a piece of a page is called when it is announced, such as 'Frog songs' for a link.

Braille display

A device with rows of small pins that rise to form braille letters for reading by touch.

Text to speech

Software that turns written words into a spoken voice.

Check your thinking

1. How does a screen reader know what to say?

   Show the answer

   It reads the labels and text in the page's code. The code labels each piece as a heading, link, button or image, and the screen reader reads those labels and the text.

2. Why does a picture on a web page need alt text?

   Show the answer

   The screen reader cannot see the picture, so it reads the description instead. A picture is only colored dots to a computer voice. The description tells the listener what the picture shows.

3. What does one special key do for Sam?

   Show the answer

   It jumps to the next big title. One key hops from title to title, so Sam can find things fast.

4. Sam wants the part of the page about ducks. What is the quickest way to get there?

   Show the answer

   Jump from heading to heading. The heading key skips everything between the titles, so 'Ducks' is only a few presses away.

5. Which link name helps a screen reader user most?

   Show the answer

   Feed the ducks. Links are often heard one after another. 'Feed the ducks' says where it goes. 'Click here' could be anything.

6. A page looks perfect on screen. Can you tell from its looks alone that it works well with a screen reader?

   Show the answer

   No. What matters is the structure and names in the code, which you cannot see. Two pages can look identical while one has real headings, named links and alt text and the other has none. Only testing or reading the code shows the difference.