Test the accessibility of your website: screen readers

June 25, 2023
Ivar Illing
4 minutes

Monitor at the wall with talking mouth on screen

This is part 5 of our blog series on testing the accessibility of your website. Also read the other parts:

Color and contrast
Enlarge font
Keyboard navigation
Automatic testing

Do you want to get started with the accessibility of your website? Then it helps to test how your website is doing now. You learn a lot from that, so that you can then take more targeted measures. This is part 5 of our blog series on testing the accessibility of your website.

In this section, we’ll take a closer look at testing with a screen reader. The screen reader is a widely used tool, especially for blind and partially sighted people.

What does a screen reader do?

A screen reader reads the HTML structure and content of a web page from top to bottom. It then converts this into text, reads it out and, if necessary, forwards it to a Braille display. Especially people who are blind or partially sighted use it. Sometimes people who have trouble reading (for example because they suffer from dyslexia) also use a screen reader. Interestingly, almost 11% of screen reader users are not challenged. They have articles read aloud, for example.

For blind and partially sighted people, however, a screen reader does much more than read articles aloud. They also use the screen reader for communication, navigation, requesting services and buying products. It is an essential tool for many of them to access the digital world.

Did you know that blind and visually challenged people can even use platforms such as Instagram with the help of a screen reader? This is made possible by image recognition technology, manually added alt text and audio descriptions.

Sighted users vs. screen reader users

Screen reader users experience your website in a very different way than sighted users:

Sighted users

As a sighted user you see a website in blocks of information. Most web pages have navigation features at the top or side of the page. Images are used to direct your attention to the most important information, for example to new content or offers. A well-designed website uses visual cues to help you understand and use them.

Screen reader users

Screen reader users read a website linearly, from top left to bottom right. They have no overview and cannot oversee the entire web page. The entire page is read aloud in text as a marquee. As a result, the visual layout and the position of the information is no longer important.

The way someone navigates with a screen reader varies:

The blind only use the keyboard for navigation.
Visually challemged people are usually accustomed to using a mouse.
Screen readers on smartphones and tablets use special gestures to navigate a website.

With a screen reader you read a website line by line, item by item. To quickly browse through a page, you can use the search function on the site or in the screen reader. You can also jump from element to element. For example from link to link, header to header or form field to form field. The structure is determined by the source code of the page and the corresponding text is read aloud. It is therefore very important for screen reader users that the structure of the page is properly set up. You can quickly see whether the structure is in order by pasting the text of a page without format and images into a text editor.

Which screen reader is best for testing?

The following screen readers are the most popular:

Screen readers are usually developed specifically for a particular operating system. As a result, people often use multiple screen readers.

JAWS for Windows is one of the best-known screen readers, but also the most expensive. It costs more than € 1000. NVDA and Microsoft’s built-in “Narrator” screen reader are free alternatives to Windows. Apple VoiceOver comes with any Mac or iOS device. On Android you can use TalkBack and for Chrome there is ChromeVox. You can test your website perfectly with these free options.

Although testing with as many screen readers as possible would be preferable, it is generally recommended to test with 1 or 2 screen readers.

Pay attention to this during testing

If you are going to test, check whether your website meets the following points:

You can navigate the website using only the keyboard.
The headlines are clear and descriptive.
The page is well structured. You can easily jump from element to element.
It is clear where each link directs to.
It is clear what buttons are for.
Dynamically generated content can also be accessed with the screen reader.
All images have a good alternative text (alt attribute).
Text is not part of the images, but placed around it. Text in images is not read aloud.
Form fields have the correct labels. It is clear what you have to fill out in the field.
The form can be submitted using only the keyboard.
The autofill functionality of forms works well.
The form fields have clear error messages that are read aloud.
Auto-playing carousels, videos and audio can be paused.
Charts are not too complex and have a clear description.
Important information in tables is accessible.

Testing with a screen reader can be quite a challenge if you have never worked with a screen reader before. So don’t jump to conclusions if something doesn’t work out but first find out if you might be doing something wrong yourself.

Testing with expert users and an expert review

You can of course also leave testing the accessibility of your website with a screen reader to users with a challenge. We even strongly recommend it, because they should be able to use your website in the end. Are you not sure how to approach this? We are happy to help you with this. First we can put together a user group consisting of both experienced and less experienced users and let them test the website with a screen reader. We then convert the results of this test into advice. We can also conduct an expert review for you. One of our accessibility experts will then check your website for, among other things, the points that we have described above.

Need help testing the accessibility of your website? We are happy to help you! Please contact us.