How to make Storyline keyboard accessible

Not everybody can use a mouse. Some people have carpal tunnel syndrome, a broken arm, or cerebral palsy. Others are blind or have low vision and may rely on a screen reader to access websites. They navigate through content using the keyboard, so if a site or app is not keyboard accessible, it can be difficult or impossible for them to use. 

A screen reader

As someone who uses a mouse all day, excessive clicking can be very tiring and annoying. Because of this, I prefer to use my keyboard whenever possible, as it allows my clicking hand to rest.

This quick tutorial will allow you to navigate through your Storyline file without having to click. You could even remove the previous and next buttons entirely. 

Keyboard accessibility can improve the overall experience for everybody, and I wish Storyline had made things easier for us to implement it.

Note: I’m using an older version of Storyline to demonstrate this. You might notice a slight change in the appearance of the triggers, but otherwise, everything will work the same. 

Step 1: create a number variable called “ClickCount” and set its default value to 0.

Step 2: on your first slide, create the following trigger:

Adjust variable

Set ClickCount to value 0

When the timeline starts on this slide

Step 3: on the same slide, create another trigger:

Adjust variable

Add value 1 to ClickCount 

When the user presses *tap a key on your keyboard* on this slide

Note: I’m using a French keyboard, so “droite” in my example just means I pressed the right arrow.

Step 4: copy paste this trigger on the same slide, and repeat with all the keyboard keys you wish to include

Step 5: Create a new variable trigger.

Jump to next slide 

When the variable ClickCount changes

If ClickCount = value 1

Optional - Step 6: Make it easier to click

If people want to use their mouse, make it easier for them. Instead of having them click on tiny buttons, you can create a hotspot on the whole page. Make sure this layer is on top of all the others in the timeline, and create a new trigger:

Jump to next slide

When user clicks Hotspot

Then this trigger:

Add value 1 to ClickCount

When the user clicks Hotspot 1

Step 7:  Apply all these triggers (steps 2 to 6) to every slide. Optional: Put some triggers on the Master slide

Put some of these triggers on the Master slide to save yourself a lot of copy-pasting. Remember that whatever you put on the Master will reoccur on every page. This is why you can’t put any trigger that checks if ClickCount changes.

If you have animations:

Let’s say you have a textbox on your slide. You want a 2nd textbox to appear after 1 click/keyboard press and the 3rd textbox to appear after a 2nd click/keyboard press. 

First, select the shape, go to states and set the initial state to hidden.

Then, create the following trigger:

Set state of *your shape* to normal

When ClickCount variable changes

If ClickCount = value 1.

If you have more animations, just repeat this step and change the ClickCount value accordingly.

If you have audio files:

Let’s say that for each textbox that appears, you want an audio file to play and read the text. Just create the following triggers:

Play “audio 1”

When timeline starts on this slide

Then, create the following trigger:

Set state of *your shape* to normal

When ClickCount variable changes

If ClickCount = value 1.

Then create this trigger:

Add value 1 to ClickCount 

When “Audio 1” completes

Rinse and repeat for all your audio files:

Add value 1 to ClickCount

When “Audio 2” completes

Just don’t do it for your last audio. Instead, create this trigger:

Jump to next slide

When ClickCount changes 

If Clickcount value=*the number of clicks/keybord presses needed to get to the following slide*

If you have multiple audios, they will play over each other. Here is what you need to do to avoid this: 

Create the trigger:

Play “audio 2”

When Clickcount variable changes

If Clickcount = value 1

Repeat for all your audio tracks

Then create the trigger:

Stop “audio 1”

When Clickcount changes

If Clickcount is equal or superior to value 1.

Repeat for all your audio tracks

Finally, don’t forget to let your users know how to navigate your training, especially if you remove the previous and next buttons entirely.