1.3.2 Meaningful Sequence - ELA Hub

Make sure that all content in your eLearning resource follows a logical reading order i.e. that assistive technologies such as screen readers read out every element on the page in a logical order which makes it easy to understand.


How do I comply?

Find out how to use your authoring tool to allow assistive technologies such as screen readers to read out the page content so that it is logical and makes sense. This could include one of the following:

  • Setting the correct tab order of objects on a page.
  • Layering the objects on a page in the correct order.
  • Placing content blocks in the right order on the 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. You can do this by re-ordering items and removing any which are not needed for understanding such as decorative images.

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 © [2020] World Wide Web Consortium, (MIT, ERCIMKeio, Beihang)


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

Back to top