Here in the Digital Media team, we are busy updating our eLearning content to meet the Web Content Accessibility Guideline (WCAG 2.1) AA level to ensure that our learning content is usable by the majority of learners.
I am mindful that there are quite a few people throughout the University who are or have created content using Articulate but may not be aware of the new legislation and what it entails, so I thought I would write a short piece to share my understanding of things to consider when designing learning content to make it accessible and inclusive.
Please note that the accessible content I have created and updated so far has not been tested by users so will ultimately have its flaws.
Updating existing learning content
Updating existing Storyline content to meet WCAG can be simple or complex depending on the type of content and its interactivity. For updating existing content, I have focused mainly on adapting this to comply with the JAWs screenreader, you may want to adjust other items listed below in the Creating new content section.
Unfortunately, JAWs screen reader is the only type of reader that is supported by Articulate Storyline. A trial version of JAWs screen reader can be downloaded from this link:
Please note that this trial version has a 30 minute restriction on it, after 30 minutes the pc will need to be restarted for the software to be operable again.
Alternatively, Enabling Services have an ATS room in the library on Highfield campus (level two/2047), please contact enable@soton.ac.uk for more information.
For the JAWs screenreader to read content in the correct order, the Tab Order for each element on the slide must be placed in the correct reading order and elements that do not need to be read out removed.
Tab Order can be found on the Home ribbon .
Select Tab Order to open a new window. The new window will list all the elements as per the slide timeline, select each element in the window and the corresponding element will highlight within a red box on the slide. Note, the window will also list any elements on the layers but when selected will not highlight, this is because the layer will need to be selected before the element becomes active.
With an element selected in the Tab Order window, use the up or down button to move the element to its correct reading position. Repeat for all other elements. Save the setting to return to slide view.
To test, preview the slide and press the Tab button on the keyboard, a yellow box will surround the element to be read by the screen reader.
Remember to add Alt text to images.
Alt text will not be read when Shapes or buttons have existing states attached. Unfortunately, all states will need to be removed, alt text added to the shape and then states can be added.
Hotspots are not recognised in Tab order list and should be replaced with shapes with triggers formatted so that it is transparent.
I have found this video useful to understand Tab Order better.
Designing Accessible eLearning Using Articulate Storyline 2
For existing learning content with complex custom interactions (drag and drop interactions or hotspots) you may wish to consider:
- Either duplicating the original to make an inclusive version with more simplified interactions that can be operated using the keyboard. Remember if you do this and the content needs to be updated, you will need to update twice.
- Expand the learning resource so the user has the option to branch to inclusive content (interactions that can be operated using keyboard) or non-inclusive content (drag and drop interactions).
Creating new learning content
For those who are creating new content, I have compiled a simple table of items to consider and which type of learner it impacts/benefits.
Colour contrast
| Non-inclusive | Visual | Hearing | Mobility | Cognitive |
| n/a | Yes | n/a | n/a | Yes |
Users with visual impairment will benefit most from high-contrast colours. Although I have indicated that colour contrast is not applicable to non-inclusive, hearing and mobility groups, this is just a suggestion that it is not vital to these groups.
If unsure print the page in greyscale to ensure that all the content is legible, if not then a user with poor visibility will have difficulty seeing this.
Font size and type
| Non-inclusive | Visual | Hearing | Mobility | Cognitive |
| n/a | Yes | n/a | n/a | Yes |
All users will benefit from good use of font type and size. Although I have indicated that font size and type is not applicable to non-inclusive, hearing and mobility groups, this is just a suggestion that it is not vital to these groups.
Use sans serif fonts such as Arial, Helvetica, Lucinda Sans, Tahoma or Verdana. The recommended size is 12 point or larger.
Users will be able to enlarge the browser window using the scale tool for readability to enhance readability.
Screen reader
| Non-inclusive | Visual | Hearing | Mobility | Cognitive |
| n/a | Yes | n/a | Yes | Yes |
Articulate Storyline only supports JAWs screen reader, this may restrict users with visual, mobility or cognitive impairment if they do not own this type of screen reader.
Adjusting the tab order when authoring your course will enable JAWs to read the page in a particular order so that it makes sense to a user with visual impairment.
Storyline 2: Customizing the Tab Order of Slide Objects
Naming objects on the timeline helps identification on the Tab order list, this is helpful if you want to delete an item so that the screen reader does not read it.
Transcript for audio tracks
| Non-inclusive | Visual | Hearing | Mobility | Cognitive |
| Yes | Yes | Yes | Yes | Yes |
This is useful for all of the users and can be added to Note Panel. Users are able to print the note panel or copy and paste onto another document. Visually impaired users are able to print the transcript and use it to convert to Braille format.
Storyline 3: Adding Slide Notes
Closed captions for videos
| Non-inclusive | Visual | Hearing | Mobility | Cognitive |
| Yes | n/a | Yes | Yes | Yes |
Closed captions are a legal requirement for videos. If the videos are embedded in Storyline, the captions will need to be generated. Fortunately, YouTube automatically generates captions for videos hosted on this site. Generally, the captions are quite accurate but may misinterpret some technical terms or phrases.
Closed captions for videos are useful if some computers do not have built-in speakers or if the user is working in a quiet area such as a library.
Keyboard
| Non-inclusive | Visual | Hearing | Mobility | Cognitive |
| n/a | Yes | n/a | Yes | n/a |
Users who are unable to use a mouse will use the Tab key to navigate around the page, similar to users with visual impairment. Use Tab order on Storyline to enable this function.
Plain English and Usability
| Non-inclusive | Visual | Hearing | Mobility | Cognitive |
| Yes | Yes | Yes | Yes | Yes |
All users will benefit from jargon-free content. If jargon is used, ensure that there is a glossary to explain the definition of each term.
The Storyline player is very intuitive, if however the inbuilt interface is not used, ensure that navigation buttons such as next and previous are placed in the same position for each slide.
Susi Miller from the IT Training and Development team has put together a very informative Accessibility guide:
I have also found this site to be useful.
Storyline 3: How to Design an Accessible Course
I hope this blog helps anyone who is creating Articulate Storyline content. Any questions or comments will be gladly received Mimi.lee@soton.ac.uk.
