Storyline 360: 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 modern and classic players in Storyline 360 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 360 build 3.36.21213.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

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 360 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).

As of April 27, 2021, a "previous" button on the first slide of a course or a lightbox gets disabled and skipped during keyboard navigation, improving the experience for screen reader users and keyboard-only users.

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:

  • Spacebar: Plays and pauses the timeline; replays the slide when the timeline has ended
  • Home/End: Jumps to the beginning or the end of the timeline
  • Arrows: Jumps backward or forward in 0.1-second increments
  • Page Up/Page Down: Jumps backward or forward in 1-second increments

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:

  • Enter/Spacebar: Toggles audio on and off
  • Home: Mutes audio
  • End: Jumps to max volume
  • Arrows/Page Up/Page Down: Adjusts volume in 10% increments

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:

  • Enter: Activates the selected tab
  • Home/End: Jumps to first or last tab
  • Arrows: Moves through the tabs

Sidebar Toggle

In the modern player, the sidebar toggle (☰) is properly labeled and placed in the player hierarchy.

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. You can change the color(s) of the focus indicator to complement your course design. Follow these steps, depending on your player style.

Modern Player

As of July 2021, the modern player has a two-color focus indicator so it's always visible against any background in your course. Here's how to select your colors:

  1. Go to the Home tab on the Storyline ribbon and click Player.
  2. When the player properties window opens, click Colors & Effects on the ribbon.
  3. Select two Accessibility Focus Colors, preferably one light and one dark.

Classic Player

The classic player has a one-color focus indicator. Here's how to select a color:

  1. Go to the Home tab on the ribbon and click Player.
  2. When the player properties appear, click Colors & Effects on the ribbon.
  3. Click Show advanced color editing.
  4. Use the Edit Item drop-down list to choose Accessibility >> Focus Rectangle.
  5. 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:

  1. Go to the Home tab on the Storyline ribbon and click Player.
  2. When the player properties window opens, click Other on the ribbon.
  3. 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.