The Google Plus logo

Accessibility and elearning: a guide to screen readers

Imagine using a computer with a blindfold. How much could you get done? Without visual feedback, most of us would struggle to open our emails, let alone type or read one. For many people, visual impairment is a daily reality. But screen readers can give them access to what many others take for granted.

Male professional using heutagogy for self-directed learning

What is a screen reader?

Screen readers, such as JAWS, Windows-Eyes, Supernova and Voiceover, are software programmes designed to help visually impaired individuals interact with computers. They’re commonly used for surfing the web, and they can also be used with browser-based elearning programmes.

But set a screen reader to read out an elearning screen designed with only sighted users in mind and what you hear will often be confusing and unhelpful. Many usability issues can be solved with good coding, but there are a few extra things that you can do to make sure that all your users get the most out of your learning.

What exactly do screen readers read?

A screen reader uses an HTML document to read out all of the text on the page. What they can’t do, however, is read out images – a computer doesn’t know how to make sense of a picture without a lot of help. So, to make things easier, you can provide a text alternative for any images you use. These are known as ‘image descriptions’ or ‘alternative text’ (‘alt text’ for short).

Descriptions of images should be written by an instructional designer, and there is an art to writing them. ‘Man in suit’ is not a very meaningful description if what is pertinent to the sighted learner is that the man is looking angry as a result of the option he just chose in a simulation. In this case, a better description might be ‘Geoff looking angry and disappointed’.

Because screen readers can’t read text that is embedded in an image or animation, it’s best to avoid placing important text in images if possible. If you must, you should include that text in your graphic description.

Creating alternative versions that are screen reader friendly

Screen readers find it easy to draw out content from an HTML file. But other technologies such as Flash weren’t originally designed to be accessible to screen readers.

If you are developing with a tool that doesn’t have accessibility features, you might consider creating an alternative version of the course targeted to screen reader users. These can be good solutions, but the term ‘alternative version’ can mean anything from a Word document containing content text to a fully interactive HTML alternative course.

The example below shows a screen-grab from a Flash-based course that has an accessible alternative version. Directly below, you can see a drag and drop interaction and, below that, the accessible version of that interaction.

BBC Academy screengrab showing the importance of screen readers for accessibility

The version below shows a screen reader optimised version of the same interaction. As you can see, the screen is laid out with visually impaired learners in mind, and can be operated via the keyboard.

BBC Academy screen grab to show the importance of screen readers.

How do I accommodate screen readers in my design?

Whether you develop multiple versions of a course or one integrated solution, here are some things to consider:

  • All images need relevant text descriptions as an alternative – this allows a screen reader to describe them.
  • Image descriptions should end with a full stop. Screen readers don’t know to pause if they don’t see a full stop and will plough straight on to reading the next item without ‘pausing to take a breath’ at the end of the description.
  • Partially sighted users navigate using the tab key on the keyboard. It’s important that the buttons are arranged so that learners don’t have to do lots of unnecessary tabbing in order to perform straightforward interactions.
  • Any video or audio should also have a text transcript.
  • Buttons should all be labelled (e.g. Submit, Next, etc.) so that screen readers will read them out when navigating via keyboard.

A final word on screen readers

Designing for visually impaired learners is an often overlooked task, but their user experience can skyrocket with just a few simple considerations. You may be interested in another recent LEO Learning blog on the subject, ‘Making learning accessible: how does colour impact your learners?“.

You can find more LEO Learning insights, including white papers, webinars, podcasts, infographics and ebooks, on our resources page.

Get more resources