20-20a Westminster Buildings, Theatre Square, Nottingham, NG1 6LG(0115) 888 2828

Screen reader user testing a bad and a good website

Written by Ben Leach on

As part of our partnership with Shaw Trust Accessibility Services, we’ve been able to witness a number of assistive technologies in action, and have been able to understand why accessibility is vital when it comes to assistive technology.

We wanted to communicate this to other people who have not been able to experience assistive technology in action. So we enlisted the help of Alan Sleat, Shaw Trust’s screen reader assessor, who is also blind himself.

Originally produced for demonstration purposes at WordCamp Belfast, we developed two (visually) identical websites, but one that is inaccessible and another that is accessible. In the following video, Alan walks us through both websites, demonstrating that although both sites are visually identical, they aren’t to a screen reader.

Issues with auto-play videos

Here, Alan explains the issue behind allowing videos to auto-play on a website. Explaining that they are off-putting and can interact badly with the screen reader.

Auto-play video issue demonstration

Problems with poor heading structure

Headings are incredibly important for screen reader users, and not being able to navigate the page via headings can prove detrimental to the user experience, especially on a site that contains a lot of content. In this section, Alan demonstrates the pitfalls of not being able to navigate via headings on a website.

Poor heading structure demonstration

Non-descriptive links

When creating links, it's imperative that they tell the user exactly where they are being pointed to. When a screen reader looks at a list of links on a page, they need to be immediately sure of where the link will take them, and whether this opens in a new page.

Non-descriptive links demonstration

Non-descriptive alt text

For a screen reader, being able to understand the context behind graphical components of a website is important. For this, you'd add alternative text to explain the context behind the image in words. However, when alt text is not descriptive, it can prove a challenge for blind users to understand. In this section, Alan explains why image descriptions should always be descriptive.

Non-descriptive alt text demonstration

Poorly created lists

In order to communicate content in the most effective way possible, whenever there is a list of items, they should be in a list, with each list item separated. Here, Alan demonstrates how a list is read out on a screen reader when it's not labelled properly.

Poorly created list demonstration

Incorrectly formatted forms

When creating a form that is possible for a screen reader to use, it's essential to label each part of the form accordingly with ARIA labels. Without correct labelling or descriptions, a blind user will not be able to understand what they are filling out. Alan explains the disadvantage he has when trying to fill out a form that has been incorrectly labelled.

Demonstration of poorly labelled forms

Video player set-up problems

When there is more than one video available on the website to watch, it's important that the videos are structured accordingly and that a screen reader user can understand that there are multiple videos. Alan explains in this section the importance of highlighting multiple videos to screen reader users.

Demonstration of video players set up poorly

Demonstration of Good Heading Structure

Heading structure is an integral part of a website, not only do they make the content easier to read, they act as navigation points for a screen reader. Getting Headings in the correct order, and ensuring they communicate the content that comes after them is important. Here, Alan shows how a screen reader can navigate between Headings that are structured correctly.

Demonstration of good heading structure

Ensuring form labels are used

When creating a form that is possible for a screen reader to use, it's essential to label each part of the form accordingly with ARIA labels. Forms that have the correct label allow screen reader users to understand how the form is used and what information needs submitting where. Alan explains how a good form is labelled and demonstrates what a good form sounds like on a screen reader.

Demonstration of a good form

Demonstration of good, descriptive links

When a screen reader user reads through a website, it's important that any links on the page are descriptive so that the user knows where that link will take them, and whether this will open in a new window, a new tab, or the same window. Alan demonstrates how good, descriptive links help screen reader users navigate through a website and skip to pages that they want to.

Demonstration of good, descriptive links

Why 'Skip to content' is important

Being able to skip to content is a particularly important tool for screen reader users and keyboard navigation users. This allows users to skip past a navigation bar and get straight to the main content of a page, without having to tab/read through all of the navigation items. This is particularly useful on a site that may have a large quantity of navigation items. In this section, Alan shows us briefly how a 'Skip to Content' button works and why it's so useful.

Demonstration of 'Skip to Content' link

Good list semantics

Lists often contain important information, such as ingredients or more important things like poisonous plants. Wrongly communicating these lists can cause a poor tasting cake, or potentially in the latter example, serious illness. This is why good list semantics need to be used in any list that's on the web. Each list needs to be labelled (as either an unordered or ordered list) and each list item needs to be labelled individually. Alan demonstrates how a good list sounds to a screen reader.

Demonstration of good list semantics

Good use of alt text

Alt text is crucial in order for screen readers to understand the context of the images presented on a page. A good alt text on an image will ensure the screen reader user understands the context and the information presented by the image. Alan highlights good alt text usage and why it's important, particularly for someone who has lost their sight later in life.

Demonstration of good alt text use

No auto-play video

Auto-play videos are a huge problem for screen reader user, often making an entire website completely unusable. Here, Alan demonstrates good video use, and the importance of allowing a screen reader to play the video if, and when, they want to. Even so, Alan shows that pausing the video once it's playing can still be a challenge.

Demonstration of good video use
Skip to main content