Storyline 3: The Accessible Player Makes Navigation Easier
Article Last Updated
This article applies to:
We're committed to giving authors tools to easily create courses that are accessible to all learners. With that goal in mind, we made the Storyline 3 player much more accessible. Now, learners can use a broader range of screen readers with more web browsers and devices, and learners can take advantage of more screen reader features and improved player controls for easier navigation. (Want to learn more about the latest accessibility enhancements for slide content? Click here for details.)
Most of these accessibility enhancements are built right into your published courses so you don't have to do any extra work. You only need to install Storyline 3 build 3.10.22406.0 or later.
We also added two player settings to give you more control over the appearance of accessibility features in your courses. Check out the details below to learn about all the latest enhancements.
- Expanded Screen Reader Support
- Discoverable Structure and Hierarchy
- Improved Player Controls
- New Player Settings
Expanded Screen Reader Support
Learners have more screen reader choices. They can use NVDA, VoiceOver (macOS, iOS, iPadOS), TalkBack, and JAWS with our supported browsers on desktop, tablet, and mobile devices. (Note: JAWS has limited support for Microsoft Edge.)
And while learners can still tab through the player controls and menus as they always have, they can now take advantage of more screen reader navigation features.
Discoverable Structure and Hierarchy
We reorganized the Storyline 3 player controls into logical groups, added ARIA landmarks, and restructured player features to follow a consistent order and hierarchy. As a result, it’s easier for learners with assistive technologies to understand the structure of a course, stay in context, and move around quickly.
Improved Player Controls
Player controls are grouped semantically, organized coherently, and labeled correctly. They function appropriately for keyboard-only users and screen reader users.
Playback Controls
Skip Navigation Shortcut The skip navigation shortcut is now visible when it has focus. It appears in the lower right corner of the slide until the learner activates it or tabs past it. This temporary visibility helps keyboard-only users who aren't using a screen reader. (Want to turn off the skip navigation shortcut? See below.) |
Navigation Buttons The Next, Previous, and Submit buttons are semantically grouped for screen reader navigation, and learners can tab through them individually. They're properly labeled, and their states are tracked and enforced (e.g., when a button is disabled). |
Slide Controls The play/pause button, seekbar, and replay button are semantically grouped for screen reader navigation. Learners can use the Tab key to access each control individually and activate each one using these keyboard shortcuts:
Screen reader users can operate the seekbar as a slider interaction with standard controls. |
Course Controls The closed captioning button and volume slider are semantically grouped for screen reader navigation, and learners can activate them individually. The volume icon itself now toggles the volume on and off. Learners can use these keyboard shortcuts to control the volume:
Screen reader users can toggle audio on and off by activating the volume button. They can adjust the volume by selecting the volume slider and using standard slider controls. |
Sidebar and Topbar Controls
Player Tabs Sidebar and topbar tabs are properly labeled and organized in the player hierarchy. Learners can use these keyboard shortcuts to interact with sidebar and topbar tabs:
|
Timers Timers are now reachable and readable by assistive technologies. Time is read in hours and minutes remaining. |
Menus and Dialogs
Menu The course navigation menu functions as a tree control for keyboard users, including collapsing and expanding sections. Screen readers announce the current level in the hierarchy, the learner's position in the menu, and the active item. |
Glossary The glossary is a semantic list of terms and definitions that are structured as an accordion interaction for keyboard navigation. |
Notes Notes are read as regular text by screen readers, and they support text features in screen readers, such as the virtual cursor. |
Resume Prompt The resume prompt functions as a true dialog, meaning learners can't access content behind the prompt while it's displayed. |
New Player Settings
We added two new player settings so you can control the color of the accessibility focus rectangle and turn off the skip navigation feature.
Change the Accessibility Focus Color
The accessibility focus rectangle lets sighted keyboard-only users see which object is currently selected. By default, the accessibility focus rectangle is yellow. Here's how you can change it to complement your course design.
- Go to the Home tab on the Storyline ribbon and click Player.
- When the player properties window opens, click Colors & Effects on the ribbon.
- Click Show advanced color editing.
- Use the Edit Item drop-down list to choose Accessibility >> Focus Rectangle.
- Use the Color selector to choose a different color.
Disable the Skip Navigation Shortcut
Screen reader users have always had an option to skip the player controls and return to the first object on the slide, so they don't have to navigate through all the player features to hear the slide content again. Now, the skip navigation shortcut becomes visible temporarily after navigating through all the slide objects, so sighted keyboard users can also take advantage of this time-saving feature. It appears as a button in the lower right corner of the slide and is labeled "Back to top."
The skip navigation shortcut is enabled by default, and now you have the option to turn it off. Here's how:
- Go to the Home tab on the Storyline ribbon and click Player.
- When the player properties window opens, click Other on the ribbon.
- Mark the box to Disable skip navigation shortcut.
Tips:
- If you turn off all the player tabs (menu, notes, etc), Storyline turns off the skip navigation shortcut for you, and the option to disable it is grayed-out.
- You can change the “Back to top” label by editing your text labels.