The guiding principles around accessibility in eLearning come from what’s known as the Web Content Accessibility Guidelines or WCAG (in the US the guidelines for accessibility are known as Section 508). Following these guidelines will make our eLearning content accessible to a wider range of people with disabilities but they’ll often make our content more usable to everyone in general which is really what we need to be thinking about.
WCAG 2.0 is a stable, referenceable technical standard. It has 12 guidelines that are organised under 4 principles: Perceivable, Operable, Understandable, and Robust (or the acronym POUR). For each guideline, there are testable success criteria, which are at three levels: A, AA, and AAA
There’s two factors that contribute to the creation of accessible eLearning – the authoring tool which has built-in accessibility functions and our design decisions (that include the colours, fonts images and interactions that we include). In this post, I’ll look at how Storyline 360 assists in creating accessible eLearning modules.
Storyline 360 supports WCAG in both HTML5 and Flash outputs, including screen reader support, full keyboard navigation, visible focus indicators (yellow box around objects when using the tab key) and more. For a complete list of the WCAG requirements and which are met by Storyline 360 and which are design decisions (called author controlled) click here.
Storyline 360 supports these screen readers with HTML5 and Flash courses:
- HTML5: JAWS 16 or later with Internet Explorer 10 or later, Google Chrome (latest version), Firefox (latest version).
- Flash: JAWS 16 or later with Internet Explorer 11 or later.
Custom Tab Order
By default, screen readers read on screen objects from left to right, top to bottom but the objects you have on your slides may not fit to this pattern. In Storyline 360 you can change the tab order so that someone using a screen reader and the Tab key can move to each object in the order you set up rather than the slide layout. To change the tab order, go to the Home tab and click on Tab Order:
A window will open that shows all objects on the screen and to change the tab order click the Create custom tab order radio button:
The object at the top of the list is first in the tabbing order but you can use the arrow keys in the bottom right corner to set the order. Objects that aren’t needed in the tab order can be removed by clicking on the trash can icon in the bottom left corner. You can also add alternate text to screen objects that need it by clicking in the Alternate Text box next to each object.
If you have objects on Master slides (e.g. logos or background images) you won’t have the option of removing them from the tab order at the slide level. You’ll need to go to the Slide Master, click on the object and then right-click and then select Size and Position. Go to the Alt Text tab and untick the box Object is visible to accessibility tools. This will remove the object from the tab order screen.
Player Font Size
You can also, adjust the font size on the player up to 200% larger than the default. Go to the Player settings in Story View (or via the Home tab), then click on Colours & Effects. In the Font area you adjust the player text size. Here’s a before and after:
After (at 200%):
Skipping Player Objects
Storyline 360 lets people with screen readers skip player navigation elements, such as previous/next buttons and sidebar tabs, when they’re tabbing through slide content. It works in Flash and HTML5 courses. This option is always enabled when the module is published.
Language Identifier for Screen Readers
If you are creating a module in other languages Storyline 360 adds a language attribute to the HTML tag in your published output to identify the course language for screen readers. Again, you don’t have to do anything as it’s always enabled and it will match the language you select in the Player settings.
If you’re interested in finding out more about creating accessible eLearning, check out this free eBook from E-Learning Heroes.