[vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”177479″][vc_column column_width_use_pixel=”yes” gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/1″ uncode_shortcode_id=”553135″ column_width_pixel=”900″][vc_custom_heading uncode_shortcode_id=”841802″]How to make Storyline keyboard accessible[/vc_custom_heading][vc_column_text text_color=”color-prif” uncode_shortcode_id=”133822″ text_color_type=”uncode-palette”]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.
[/vc_column_text][vc_single_image media=”300″ caption=”yes” media_width_percent=”100″ alignment=”center” uncode_shortcode_id=”794142″][vc_column_text text_color=”color-prif” uncode_shortcode_id=”210529″ text_color_type=”uncode-palette”]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.[/vc_column_text][vc_column_text text_color=”color-prif” uncode_shortcode_id=”193490″ text_color_type=”uncode-palette”]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. [/vc_column_text][vc_column_text text_color=”color-prif” uncode_shortcode_id=”118162″ text_color_type=”uncode-palette”]Keyboard accessibility can improve the overall experience for everybody, and I wish Storyline had made things easier for us to implement it.[/vc_column_text][vc_column_text text_color=”color-prif” uncode_shortcode_id=”166236″ text_color_type=”uncode-palette”]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. [/vc_column_text][/vc_column][/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”177479″][vc_column column_width_use_pixel=”yes” gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/1″ uncode_shortcode_id=”553135″ column_width_pixel=”900″][vc_custom_heading uncode_shortcode_id=”199583″]Step 1: create a number variable called “ClickCount” and set its default value to 0.[/vc_custom_heading][vc_single_image media=”301″ media_width_percent=”100″ alignment=”center” uncode_shortcode_id=”663860″][/vc_column][/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”177479″][vc_column column_width_use_pixel=”yes” gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/1″ uncode_shortcode_id=”553135″ column_width_pixel=”900″][vc_custom_heading uncode_shortcode_id=”669178″]Step 2: on your first slide, create the following trigger:[/vc_custom_heading][vc_column_text text_color=”color-prif” uncode_shortcode_id=”737339″ text_color_type=”uncode-palette”]Adjust variable
Set ClickCount to value 0
When the timeline starts on this slide[/vc_column_text][vc_single_image media=”306″ media_lightbox=”yes” media_width_percent=”100″ alignment=”center” lbox_full=”yes” uncode_shortcode_id=”187111″][/vc_column][/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”177479″][vc_column column_width_use_pixel=”yes” gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/1″ uncode_shortcode_id=”553135″ column_width_pixel=”900″][vc_custom_heading uncode_shortcode_id=”846044″]Step 3: on the same slide, create another trigger:[/vc_custom_heading][vc_column_text text_color=”color-prif” uncode_shortcode_id=”146198″ text_color_type=”uncode-palette”]Adjust variable
Add value 1 to ClickCount
When the user presses *tap a key on your keyboard* on this slide[/vc_column_text][vc_single_image media=”303″ media_lightbox=”yes” media_width_percent=”100″ lbox_full=”yes” uncode_shortcode_id=”573651″][vc_column_text text_color=”color-prif” uncode_shortcode_id=”118164″ text_color_type=”uncode-palette”]Note: I’m using a French keyboard, so “droite” in my example just means I pressed the right arrow.[/vc_column_text][/vc_column][/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”177479″][vc_column column_width_use_pixel=”yes” gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/1″ uncode_shortcode_id=”553135″ column_width_pixel=”900″][vc_custom_heading uncode_shortcode_id=”125635″]Step 4: copy paste this trigger on the same slide, and repeat with all the keyboard keys you wish to include[/vc_custom_heading][vc_single_image media=”304″ media_lightbox=”yes” media_width_percent=”100″ lbox_full=”yes” uncode_shortcode_id=”156742″][/vc_column][/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”177479″][vc_column column_width_use_pixel=”yes” gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/1″ uncode_shortcode_id=”553135″ column_width_pixel=”900″][vc_custom_heading uncode_shortcode_id=”413019″]Step 5: Create a new variable trigger.[/vc_custom_heading][vc_column_text text_color=”color-prif” uncode_shortcode_id=”112146″ text_color_type=”uncode-palette”]Jump to next slide
When the variable ClickCount changes
If ClickCount = value 1[/vc_column_text][vc_single_image media=”305″ media_lightbox=”yes” media_width_percent=”100″ alignment=”center” lbox_full=”yes” uncode_shortcode_id=”112141″][/vc_column][/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”177479″][vc_column column_width_use_pixel=”yes” gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/1″ uncode_shortcode_id=”553135″ column_width_pixel=”900″][vc_custom_heading uncode_shortcode_id=”359268″]Optional – Step 6: Make it easier to click[/vc_custom_heading][vc_column_text text_color=”color-prif” uncode_shortcode_id=”805732″ text_color_type=”uncode-palette”]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:[/vc_column_text][vc_column_text text_color=”color-prif” uncode_shortcode_id=”877272″ text_color_type=”uncode-palette”]Jump to next slide
When user clicks Hotspot[/vc_column_text][vc_single_image media=”296″ media_lightbox=”yes” media_width_percent=”100″ alignment=”center” lbox_full=”yes” uncode_shortcode_id=”893147″][vc_column_text text_color=”color-prif” uncode_shortcode_id=”150918″ text_color_type=”uncode-palette”]Then this trigger:
Add value 1 to ClickCount
When the user clicks Hotspot 1[/vc_column_text][vc_single_image media=”315″ media_lightbox=”yes” media_width_use_pixel=”yes” alignment=”center” lbox_full=”yes” uncode_shortcode_id=”739480″ media_width_pixel=”500″][/vc_column][/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”177479″][vc_column column_width_use_pixel=”yes” gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/1″ uncode_shortcode_id=”553135″ column_width_pixel=”900″][vc_custom_heading uncode_shortcode_id=”230842″]Step 7: Apply all these triggers (steps 2 to 6) to every slide. Optional: Put some triggers on the Master slide[/vc_custom_heading][vc_column_text text_color=”color-prif” uncode_shortcode_id=”682283″ text_color_type=”uncode-palette”]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.[/vc_column_text][vc_single_image media=”314″ media_lightbox=”yes” media_width_percent=”100″ alignment=”center” lbox_full=”yes” uncode_shortcode_id=”428805″][/vc_column][/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”177479″][vc_column column_width_use_pixel=”yes” gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/1″ uncode_shortcode_id=”553135″ column_width_pixel=”900″][vc_custom_heading uncode_shortcode_id=”186000″]If you have animations:[/vc_custom_heading][vc_column_text text_color=”color-prif” uncode_shortcode_id=”334109″ text_color_type=”uncode-palette”]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. [/vc_column_text][vc_column_text text_color=”color-prif” uncode_shortcode_id=”113429″ text_color_type=”uncode-palette”]First, select the shape, go to states and set the initial state to hidden.[/vc_column_text][vc_single_image media=”307″ media_lightbox=”yes” media_width_percent=”100″ alignment=”center” lbox_full=”yes” uncode_shortcode_id=”175210″][vc_column_text text_color=”color-prif” uncode_shortcode_id=”155921″ text_color_type=”uncode-palette”]Then, create the following trigger:
Set state of *your shape* to normal
When ClickCount variable changes
If ClickCount = value 1.[/vc_column_text][vc_single_image media=”308″ media_lightbox=”yes” media_width_percent=”100″ alignment=”center” lbox_full=”yes” uncode_shortcode_id=”133925″][vc_column_text text_color=”color-prif” uncode_shortcode_id=”928136″ text_color_type=”uncode-palette”]If you have more animations, just repeat this step and change the ClickCount value accordingly. [/vc_column_text][/vc_column][/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”177479″][vc_column column_width_use_pixel=”yes” gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/1″ uncode_shortcode_id=”553135″ column_width_pixel=”900″][vc_custom_heading uncode_shortcode_id=”100499″]If you have audio files:[/vc_custom_heading][vc_column_text text_color=”color-prif” uncode_shortcode_id=”136410″ text_color_type=”uncode-palette”]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[/vc_column_text][vc_single_image media=”309″ media_lightbox=”yes” media_width_use_pixel=”yes” alignment=”center” lbox_full=”yes” uncode_shortcode_id=”507936″ media_width_pixel=”500″][vc_column_text text_color=”color-prif” uncode_shortcode_id=”202563″ text_color_type=”uncode-palette”]Then, create the following trigger:
Set state of *your shape* to normal
When ClickCount variable changes
If ClickCount = value 1.[/vc_column_text][vc_single_image media=”308″ media_lightbox=”yes” media_width_use_pixel=”yes” alignment=”center” lbox_full=”yes” uncode_shortcode_id=”614080″ media_width_pixel=”500″][vc_column_text text_color=”color-prif” uncode_shortcode_id=”186746″ text_color_type=”uncode-palette”]Then create this trigger:
Add value 1 to ClickCount
When “Audio 1” completes[/vc_column_text][vc_single_image media=”310″ media_lightbox=”yes” media_width_use_pixel=”yes” alignment=”center” lbox_full=”yes” uncode_shortcode_id=”186927″ media_width_pixel=”500″][vc_column_text text_color=”color-prif” uncode_shortcode_id=”139561″ text_color_type=”uncode-palette”]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*[/vc_column_text][vc_single_image media=”311″ media_lightbox=”yes” media_width_use_pixel=”yes” alignment=”center” lbox_full=”yes” uncode_shortcode_id=”184446″ media_width_pixel=”500″][/vc_column][/vc_row][vc_row row_height_percent=”0″ overlay_alpha=”50″ gutter_size=”3″ column_width_percent=”100″ shift_y=”0″ z_index=”0″ uncode_shortcode_id=”177479″][vc_column column_width_use_pixel=”yes” gutter_size=”3″ overlay_alpha=”50″ shift_x=”0″ shift_y=”0″ shift_y_down=”0″ z_index=”0″ medium_width=”0″ mobile_width=”0″ width=”1/1″ uncode_shortcode_id=”553135″ column_width_pixel=”900″][vc_custom_heading uncode_shortcode_id=”184479″]If you have multiple audios, they will play over each other. Here is what you need to do to avoid this: [/vc_custom_heading][vc_column_text text_color=”color-prif” uncode_shortcode_id=”106368″ text_color_type=”uncode-palette”]Create the trigger:
Play “audio 2”
When Clickcount variable changes
If Clickcount = value 1
Repeat for all your audio tracks[/vc_column_text][vc_single_image media=”312″ media_lightbox=”yes” media_width_use_pixel=”yes” alignment=”center” lbox_full=”yes” uncode_shortcode_id=”104819″ media_width_pixel=”500″][vc_column_text text_color=”color-prif” uncode_shortcode_id=”213623″ text_color_type=”uncode-palette”]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[/vc_column_text][vc_single_image media=”313″ media_lightbox=”yes” media_width_use_pixel=”yes” alignment=”center” lbox_full=”yes” uncode_shortcode_id=”641759″ media_width_pixel=”500″][vc_column_text text_color=”color-prif” uncode_shortcode_id=”137992″ text_color_type=”uncode-palette”]Finally, don’t forget to let your users know how to navigate your training, especially if you remove the previous and next buttons entirely. [/vc_column_text][vc_empty_space empty_h=”2″][/vc_column][/vc_row]