Designing for users of screen readers

Lewis Wake
Monday 29 July 2019

A screen reader is a software application that enables people with visual impairments to use a computer or mobile device. Users of screen readers can benefit from accessible web-based services. This guidance is for web and digital professionals who want to make sure that their service is optimised for users of screen readers.


Graphic of alt text markup

Describe images and provide transcripts for video

Don’t only show information in an image or video.

Users with severe sight impairments cannot rely on visual communication. They require additional aid when interpreting information. Alternative text describes the appearance and function of visual elements and we must provide it.

Provide descriptive text for photos, illustrations, diagrams, graphs, animations and videos so a screenreader can read it aloud.

For example, answer these questions when writing alternative text for photographs:

  • What is specifically in the photo?
  • What is happening in the photo?
  • Where was the photo taken?

If a picture is worth a thousand words, then the alternative text should be those thousand words. (Though maybe a little less than a thousand…)

Alternative (‘alt’) text is good for informing search engines too.

Examples of alt text

  • Bad (missing alt text): <img src="puppy.jpg"/>
  • Bad (keyword stuffing): <img src="puppy.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/>
  • Better: <img src="puppy.jpg" alt="puppy"/>
  • Best: <img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/> 

Also use audio-description and captions in videos, either as a natural part of, or in addition to the narration.


A graphic of a computer with a logical layout on screen

Follow a logical linear layout

Don’t spread content all over a page.

A screenreader takes people through a web page in the order patterns and components appear in the HTML code. This might not be the same as how they appear visually on the page.

It can be confusing if web page elements are announced out of context or in the wrong sequence.

A user’s flow can be interrupted because the next element expected – for example, a submit button after an input field – appears a lot later or earlier in the HTML, even though visually it is close by.

Ensure that screen readers can navigate pages in the correct order.


A graphic of structured HTML labels

Structure content using HTML5

Don’t rely on text size and placement for structure.

A screenreader will usually read out text with the same voice regardless of font size, weight or other styling. Screen readers will also not convey the visual arrangement of content on a web page, and what that arrangement implies.

To interpret a web page effectively, users need correctly marked up elements like headings, form labels and lists.

Building blocks of the page (header, navigation, main content and footer) should be set outwith landmark tags, so the structure can be announced audibly, understood and jumped to by the user.


Graphic of a computer keyboard

Build for keyboard use only

Don’t force mouse or screen use.

People who use screen readers often cannot see a mouse pointer. Instead of a mouse they use the keyboard to navigate, moving between elements such as links, form fields and buttons.

Ensure that all the actions on the page can be started and finished using only a keyboard. This includes: closing notifications, getting help, controlling videos and submitting forms.

You can test this yourself right now. Try tabbed browsing on this blog post for starters:

  • Previous: Shift+Tab
  • Select: Enter
  • Next: Tab

Resource: I Used The Web For A Day With Just A Keyboard


Graphic of descriptive links with a thumbs up next to 'contact us' and a thumbs down next to 'read more'

Write descriptive links and headings

Don’t be vague.

Screen readers can read out a list of all the headings or links on a page. This enables the user to jump to the desired item without listening to all the content.

Heading links need to make sense out of context – a list of ‘Read more’ links is meaningless.

Instead, describe the target section so the user can decide whether that information is right for them.

For instance, avoid:

To download the Word template, click here.

Instead, write:

To download Word templates, go to the Office 365 templates page.


Try out a screen reader yourself for free

If you own a smartphone, tablet, or computer, you may be surprised to learn there are already widely used screenreader applications built-in to the operating systems of these devices.

My recommendation is to use one of the screen readers on a device of choice on a webpage you frequently visit to understand how a screen reader interprets it.

Android

iOS

Mac

Samsung

Windows


No one should be excluded because of their disability.

As well as being the ‘right thing to do’, it’s a legal requirement to treat people with disabilities equally, in terms of opportunities and experiences. When designing a service, accessibility should be a priority.

Understanding accessibility means we can build services that work for everyone, whatever their access needs.

For best practice, follow current accessibility and plain English guidelines, as well as the requirements of the Equality Act 2010 and Northern Ireland equality legislation.

Resources for this article

Related topics