Make sure that all the content in your eLearning resource follows a logical reading order for a screen reader, or keyboard only user.


How do I comply?

Note
This standard requires that you ‘programmatically determine” the reading order. For a web page this is achieved using coding, e.g. semantic elements and ARIA landmarks, but this is rarely achievable using a rapid authoring tool.

  • Check with your authoring tool to find out how to apply a logical reading order to your content. You may need to:
    • Set the correct tab order of objects on your page.
    • Layer the objects on your page in the correct order.
    • Place content blocks in the right order on your page.

Why?

  • Unlike someone who is sighted and can visualise multiple things at once on a page, a screen reader user must follow a particular order when reading content. The screen reader will read in a linear order from top to bottom and, in English, from left to right on a page.
  • A logical reading order will also benefit someone with a motor impairment who is using the keyboard to navigate.

eLaHub examples

1. Set the correct tab order

In Storyline, you are able to set the correct tab order for a page. Every time you add an item to the page it will appear on the tab order. You then need to make sure that the order in which those elements are selected by a keyboard only user, or read out by a screen reader is logical.

Tab order functionality in Storyline. The developer has created a custom tab order so that the slide will be read correctly by a screen reader.

Storyline
Custom tab order

(No audio)

Storyline
Tab order demonstration

Video shows:
A learner tabbing through an eLearning slide using the keyboard. The tab order has been set correctly so that the objects on the slide follow a logical order.

2. Layer objects in the correct order

In Lectora the screen reader will read what is in the Title Explorer from the top to the bottom of the list. It will read the title level first, then the chapter level, then section level and finally, anything that’s on the page.

Title Explorer in Lectora, which demonstrates that objects in the page will be read from top to bottom.

Lectora
Layer objects

Since the course title and navigation are at the chapter level, these will always be read out before any content on the page. You can avoid this if you have selected the Use Web Accessibility Settings option for your title. Lectora allows you to group objects together and then use the Set Reading Order to Last option so that those consistent title and navigation elements can be read out after the page content, and easily skipped.

3. Place content blocks in the correct order

In CourseArc it is the order in which the blocks are placed which determines the reading order. This example shows a text block placed above an image block because the developer wants a screen reader to read the text, before it reads out a description of the image.

CourseArc blocks on a page. The text block appears first and is then followed by an image block.

CourseArc
Content block order


How can I test?

  • You can sometimes use the arrow keys, or the tab key to see which order elements will be read on your page. For example, with Storyline resources, each time you tab, you will see a yellow box appear around the element which will be read out by the screen reader. This makes it easy to make sure that everything will be read in the right order.
  • If your eLearning tool does not have this functionality then the best way to test is to use a screen reader to read out your content.

Further information

Screen Readers
There are many screen readers available. These are our preferred options for testing:


WCAG information

CategoryPerceivable
Guideline1.3 Adaptable
Create content that can be presented in different ways (for example simpler layout) without losing information or structure
WCAG link
1.3.2 Meaningful sequence (Level A)
WCAG textWhen the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

Copyright © 2019 W3C ®


Beta page
Please help us to make this page better for everyone in the eLearning community by contacting us with your improvements, examples and suggestions.