5 tips on improving accessibility in Articulate Storyline

 

5 tips on improving accessibility in Articulate Storyline

April 23, 2021

Elearning Developer Jamie Laurence shares his top tips for improving accessibility in Articulate Storyline.

Introduction.

Over the last 6 months, Articulate has been pushing lots of new updates to improve the accessibility of Storyline 360. As part of our efforts to produce more inclusive elearning, we have been pushing ourselves to learn as much as we can to make our content the most accessible content that we have ever created.

Here are some things that we have learned along the way.  

Before we get started, I’d like to take this opportunity to say that we are still learning! We are on a journey, and consequently continuously improving. We’ve not been alone in this journey. We’ve had the pleasure of working with the National Autistic Society to rebuild all of their current elearning modules. This is part of their commitment to delivering great, accessible learning experiences to their audience. Without them, we wouldn’t be where we are today, so thank you!

With that out of the way, let’s discuss our top tips on accessibility in Storyline.  

Top Tip #1 – Focus order.

First and arguably, most important, is the focus order of your content. This is the order in which content should be consumed by the learner. Here in the UK, this is most often read from left-to-right, top-to-bottom. The same direction we read in. However, it’s important to note that this rule of thumb, may not apply to content that is written in languages that are read from right-to-left such as Arabic or Hebrew. 

The focus order of your content is often determined by the format, layout, and design. However, someone with a visual impairment may not be able to see this, and someone with a motor impairment might not be able to navigate this order. And this is where the focus order feature in Storyline becomes important.

In practice

You can manipulate the focus order of your Storyline slide by clicking the “HOME” tab, there you’ll find the “Focus Order” button. Once pressed, you can then change the radio button from “Use the default focus order” to “Create a custom focus order”. To reorder the items on your slide, drag the content in the correct order. It is important that elements that are decorative or unimportant are removed from this order, that way you don’t overwhelm the user with unimportant information and you give them the quickest and easiest experience to take in everything that they need. Don’t forget the elements on your slide and layout masters! These will also require some attention. In summary, keep it as simple as possible, whilst giving them access to all the information they need. 

Bonus tip

Whilst setting up your focus order of objects, try previewing your entire project and navigating only using your keyboard. If you are having trouble, or you’re finding it irritating, it’s likely that other people will have the same troubles. So, think about how you can improve this experience. One little trick we tend to do is to set the focus order with all of your content first, and then place all the repetitive objects on the player after the main content. That way the user can digest the information straight away, without having to tab through all of your UI elements, like the exit button, the menu button, the back button… If you’re not careful, it can get very laborious, very quickly!

Creating a custom focus order in Articulate Storyline

Top Tip #2 – Provide descriptive alt text.

This leads me nicely into Tip number 2. Providing descriptive alt text (alternative text). Once you have the contents of your slide in the right order, you will also need to provide them with correct descriptions of important objects that they may not be able to see. For example, if there is an image on the screen that is important to the learning experience, it needs a description. A screen reader will read this alt text when it gets to this image in the focus order. This allows the user to absorb information that would otherwise be given as an image. If the image is decorative and provides no information, turn it off by removing it from the focus order. This streamlines the experience and makes it easier for the learner.  

It’s important to remember that alt text is not just required for images! But for any element that is NOT decorative. A button, for example, may need a description of what it does. 

In practice

You can add alt text to your elements by right-clicking on them and then clicking the “Accessibility” option. The “Object is visible to accessibility tools” checkbox will turn items on and off in your focus order. The space below it is for you to add your descriptive text. Be aware that it’s easy to make spelling mistakes here as there is no indication that you’ve made an error, so double check your alt text. A little trick we do is to export the text to word via the “FILE > Translation > Export to word” option. We then use the spelling and grammar tools in the word document to check for text errors that are often not found in Storyline. If you haven’t ever done this, try it out! You might be surprised what has been missed. 

One more thing to consider, elements inside of an object’s state will also have their own alt text and accessibility. Once they’re in a state, you will no longer see them in the slide’s focus order, but they WILL be read by a screen reader if left visible. It’s always important to test your project with a screen-reader. If you find that your screen reader is reading out objects that don’t seem to exist in your focus order, it’s likely that this is hidden or tucked away in a state and you’ve missed it! This has caught us out on more than one occasion, so it’s worth knowing! 

Adding alt text to an image in Articulate Storyline.

Top Tip #3 – Provide alternatives to interactions that require dexterity and fine motor skills.

To quote Albert Einstein, “If you judge a fish on its ability to climb a tree, it will live its whole life believing it is stupid.” This has always resonated with me, as it’s important to remember that things that we may find simple, maybe a huge challenge for someone of different circumstances. For example, a drag and drop interaction which is a simple click and drag interaction may not be that simple with a motor impairment. A timed quiz where the user has a time limit to answer a number of questions, maybe a great way to add some excitement to your elearning… But, this may be extremely difficult for someone using a screen reader, or someone who has cognitive difficulties. It is absolutely crucial that these interactions don’t leave people feeling frustrated. So first, when building any interaction in Storyline, ask yourself, is this completable by ANYONE, and if not, what can I do to make sure it is? 

For the most part, this sounds like we are suggesting that you never build a drag and drop interaction again, but this isn’t the case. Build optional alternatives for the individuals that require it. For example, in addition to your drag and drop, build a version of that interaction that works like a click-to-reveal, as these can be keyboard navigable. In addition to a timed interaction, offer a non-timed version for people that require it. 

In practice

A little trick that we like to implement is to use an “Accessibility warning” pop-up on slides that require fine motor skills. This pop-up explains that the learner will need to use their mouse to complete the interaction, and if this is not possible, there is an accessible version they can access by clicking on a particular button. We also make sure that this slide is not locked. So, if for whatever reason a learner decides to continue, and then cannot complete the interaction, they can still skip the content and move on with the module, preventing anyone from getting stuck. 

It is important that these interactions still utilise a correct focus order regardless of whether there is an accessible version or not. 

As an aside, I believe that Articulate is working on a way to making their drag-and-drop interactions completable via the keyboard, but only time will tell! 

An accessibility warning pop up, allowing users to skip content they are unable to complete.

Top Tip #4 – Legibility is imperative.

Sonow we have a great focus order, all of our images and buttons have descriptions and a user can navigate your course via their keyboard and/or a screen reader without getting stuck at an inaccessible interaction… However, a particular user cannot read your text. Seems odd, right? The text looks fine to you and I, but one user is having a hard time reading your text. This must be an isolated incident… But have you checked the contrast of your colours? Are you using a San-Serif font? 

This isn’t specific to Storyline, but in my opinion, it’s a really important factor that everyone should consider. 

In practice

There are many reasons why your text may not be legible but let’s discuss a few things we can do in Storyline to make sure that you are doing everything you can to make content easy to read. 

  1. Use a decent font size for your body text. If your learners are having to squint or move really close to their screen to read what you have written, there is probably an issue. We typically use a font size of 14pt minimum for body text.
  2. Use a san serif font. The small features and accents on the end of the stroke of a letter (for examples Times New Roman) is a Serif font. Those without those little accents are a sans serif fontIn general, serif fonts are great for print, but not so much for content on a screen, so for body text, try to avoid Serifs. You can find out more about the Serif vs San Serif debate here. 
  3. Check your contrast! A great example of contrast being a problem, if you take bright green text and place it on a bright red background, not only does it look hideous, but it can be really hard to read. If you were to remove the colour and it was completely black and grey, it is possible that there would be no contrast difference between them at all. Many people would not be able to read this text. So, it is important that you check your contrast! We use a great tool on Webaim.org that allows you to put your colours in and it will tell you at what level of accessibility they pass and fail. Take a look.

There are some great tools in Storyline that allow you to set up your fonts, colours and themes. Once you’ve checked that all your colours are good, your fonts are legible and you are using large enough font sizes, you can add these to your theme! This makes it easier to change if you need to later on. 

An example of poor text legibility on the left and good text legibility on the right.

 

Top Tip #5 – Do your research, improve and re-iterate. 

Finally, it’s important to remember that accessibility on the web is always changing, there are loads of resources online about how to make content more accessible for everyone. We typically try to keep our content accessible to the WCAG 2.1 Level AA as this is what Storyline adheres to. But go online, have a browse on google, pick up a book and listen to what other people have to say but always try to improve the experiences you are creating, not for the majority, but for everyone. 

 

Some useful resources: 

https://articulate.com/support/article/Articulate-Storyline-360-is-Compliant-with-Web-Content-Accessibility-Guidelines-wcag

https://www.autism.org.uk/

https://autismonlinetraining.com/

https://medium.com/rareview/typography-on-the-web-4cd494d6b165

https://w3.org/TR/WCAG20/

https://webaim.org/resources/contrastchecker/