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.
- 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.
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.
Custom tab order
Tab order demonstration
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.
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.
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.
- WebAim guide to designing for screen reader compatibility
Overview of how screen readers work.
- CourseArc: Explanation of reading order
Useful explanation of how tools which have content blocks need to set reading order – e.g. wrapping text around images etc.
There are many screen readers available. These are our preferred options for testing:
- JAWS screen reader
WebAIM: Using JAWS to Evaluate Web Accessibility
Deque University: JAWS keyboard shortcuts
You have to pay for a full licence for this software but you can test using the 40-minute demo mode for non commercial purposes. Please check the terms and conditions in the licence agreement to ensure that you comply.
This is the only screen reader currently compatible with Articulate Storyline resources.
- NVDA screen reader
WebAIM: Using NVDA to Evaluate Web Accessibility
Deque University: JAWS keyboard shortcuts
This is a free and open source screen reader which is rapidly becoming on of the most popular screen readers available.
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 text||When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.|
Help us to make this page better for everyone in the eLearning community by contacting us with your improvements, examples and suggestions.