Storyline 360: How to Design an Accessible Course

Article Last Updated

This article applies to:

Need an e-learning course that’s accessible to all learners but not sure where to start? You’ve come to the right place. In this article, we’ll cover specific ways you can help learners interact as fully as possible with your Storyline 360 course.

Personalize the Learner’s Experience Right from the Beginning

Let learners with impairments know they’re an integral part of your audience right from the start. Provide accessibility instructions at the beginning of your course so they’re immediately comfortable with its layout and design.

For example, if you use a consistent keyboard shortcut throughout the course that jumps to the next slide so learners don’t have to use a mouse, let them know that up front.

Here’s another idea: Consider asking learners if they’ll need alternatives for some content due to visual, hearing, or mobility impairments. Then store their answer in a variable and use it to branch them to slides tailored to their needs.

For example, if a learner self-identifies as visually impaired at the beginning of a course, you could automatically display detailed, text-based descriptions of videos (to be read by a screen reader) in place of the actual videos throughout the course.

Optimize Your Course for Hearing-Impaired Learners

Add Closed Captions

Import closed captions or create them from scratch with Storyline's built-in editor. It’s easy to do and produces big dividends.

Closed captioning isn’t just for hearing-impaired learners. If your course is a second language for learners, captions might help them fully understand the content. And learners in noisy surroundings might appreciate captions, too.

Provide a Transcript

Consider adding a transcript, either via the player notes panel for each slide or as a downloadable attachment for the entire course.

Be sure to include important details in the written transcript that were conveyed visually in images and videos, so learners will have all the information they need.

Don't Use Timed Tests

Give learners the time they need to use the accessible alternatives you’ve added for them. Avoid using quiz timers.

Optimize Your Course for Mobility-Impaired Learners

Add Keyboard Shortcuts

Keyboard shortcuts can really be a blessing for learners with mobility impairments, and they’re easy to create in Storyline with triggers.

For example, consider adding a keyboard shortcut to each slide that lets learners jump to the next slide when they press a key, such as the right arrow key. Here’s what the trigger wizard would look like in this example:

  • Action: Jump to slide
  • Slide: Next slide
  • When: User presses a key
  • Key: Right
  • Object: Select a slide from the drop-down list.

In some cases, like the example above, you can save time by adding the key-press trigger to your slide master rather than each individual slide in your course.

Provide Alternatives for Drag-and-Drop and Hotspot Interactions

The following drag-and-drop and hotspot interactions require a mouse for navigation, making them difficult or impossible to use for mobility-impaired learners. If you add them to your course, provide text-based or keyboard-controlled alternatives.

Form-Based Interactions:

  • Matching drag-and-drop
  • Sequence drag-and-drop
  • Ranking drag-and-drop
  • Word bank/which word
  • Hotspot

Freeform Interactions:

  • Drag-and-drop
  • Hotspot

Here are a few examples of alternatives:

  • Rather than a matching drag-and-drop interaction, consider using a matching drop-down interaction instead since it’s keyboard-accessible.
  • You could add a link that opens a layer with a text-based alternative for a freeform drag-and-drop interaction.
  • You might let learners choose a slider alternative for a hotspot interaction, since sliders respond to the arrow keys on your keyboard.

Don’t Rely on Hover States Alone to Display Important Information

While hover states (i.e., rollover effects that require a mouse) are great for conveying interactivity, don’t rely on them to display important information. If you do use hover states to display text or images, consider providing a keyboard-accessible alternative.

For example, it’s fine to change the color of a button when a mouse hovers over it to indicate that it’s a clickable object, but you wouldn’t want to display feedback text in the hover state without also providing another way to access the information. One alternative for this example would be a keyboard shortcut that plays an audio version of the feedback for those not using a mouse.

Don’t Use Timed Tests

Give learners the time they need to use the accessible alternatives you’ve added for them. Avoid using quiz timers.

Optimize Your Course for Visually-Impaired Learners

Visual impairments cover a wide spectrum, including low vision, color blindness, and total blindness. It could also include learners who find it difficult to read on-screen text due to learning disabilities or because the course language is a second language for them.

Fortunately, there are several ways to make your course accessible for visually-impaired learners as described below.

Very often, visually-impaired learners use screen readers to experience e-learning courses, so it’s important to note that Storyline 360 supports JAWS screen readers with Google Chrome, Firefox, and Internet Explorer. See this article for supported versions.

Add Alternate Text for Screen Readers

Alternate text (alt text) is critical for learners with screen readers, and the good news is it’s easy to add. See this video tutorial for a quick overview and this user guide for details.

You only need to add alt text to slide objects that convey meaning or context to the learner. For example, you might not add alt text to a character pointing at a bullet point since the bullet point itself conveys the meaning, but you would add alt text to a character that’s part of an interactive scenario.

Here are some tips for writing good alt text (excerpted from page 8 of our accessibility e-book):

  • Convey the same content and information presented by the object or image.
  • Be concise without skimping on relevant information.
  • Convey only information not already captured in other on‑screen text.
  • Avoid the phrases "image of" and "graphic of" and just provide the information the learner needs.
  • Avoid abbreviations and excessive punctuation. Don’t use punctuation such as ***, which screen readers will annoyingly read as "asterisk, asterisk, asterisk."

Customize the Tab Order to Provide Meaningful Context

Tab order is important for learners with screen readers. Be sure to customize the tab order for each slide in a way that makes the most sense.

For example, you’d want learners to tab to a block of instruction text before tabbing to a data-entry field. Otherwise, they’ll just be confused when they land on the data-entry field, not knowing what’s expected of them.

And if a slide object doesn’t convey meaning to learners, we recommend removing it from the tab order altogether so learners won’t become fatigued by tabbing to unimportant objects and listening to screen readers describe them.

For example, you’d include a picture in the tab order if learners need the information it conveys to answer a question, but you’d probably remove a picture from the tab order if it’s just a background design element.

Here’s how to customize the tab order of slide objects.

Use Tables to Structure Text for Screen Readers

Tables are valuable for accessibility, communicating to screen readers how content is organized and providing context for learners. See this video tutorial and this user guide to learn all about using tables in Storyline.

Be sure to add alternate text and a meaningful tab order to tables and cells.

Identify the Course Language for Screen Readers

This one’s super easy. Tell screen readers which language your course uses. Just select a language in your player properties.

  1. Go to the Home tab on the Storyline ribbon and click Player.
  2. When the player properties window opens, click Text Labels on the ribbon.
  3. Select a language from the Language drop-down list.
  4. Click OK.

Customize the Text Labels

Screen readers use the text labels to describe player elements and give instructions to learners. Sometimes you might want to tweak the default text labels. For example:

  1. Go to the Home tab on the Storyline ribbon and click Player.
  2. When the player properties window opens, click Text Labels on the ribbon.
  3. Scroll down the list of text labels till you see Skip navigation screen reader instructions. (The text labels are alphabetized.)
  4. In the Custom Text field, type new instructions, such as: To skip navigation and return to the slide, press enter or spacebar. To continue to the navigation options, press tab.
  5. Click OK.

See this user guide to learn more about working with text labels.

Allow Learners to Skip Repetitive Player Navigation Elements

Good news! This feature is always enabled in Storyline 360, so you don’t have to do anything to make it work.

When learners with screen readers tab past the last object on a slide, Storyline instructs them to press the Enter key if they want to skip player navigation elements, such as previous/next buttons and sidebar tabs, and return to the first object on the slide. Details here.

Increase the Player Font Size

As the course author, you have complete control over the size of slide text, but what about player elements, such as buttons, sidebar tabs, and pop-up messages? You can increase the font size up to 200% in your player settings.

  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. Enter a percentage in the Player font size field.
  4. Click OK.

Provide Text-Based Alternatives for Animations

If you use animations to provide important context, offer text-based alternatives for visually-impaired learners.

For example, add an optional link to an animated slide that opens a static, text-based layer with the same information for learners using screen readers.

Don’t Rely on Hover States Alone to Display Important Information

While hover states (i.e., rollover effects that require a mouse) are great for conveying interactivity, don’t rely on them to display important information, since visually-impaired learners rely on keyboard navigation. If you do use hover states to display text or images, consider providing an alternative for visually-impaired learners.

For example, you wouldn’t want to display feedback text in a hover state without also providing another way to access the information, such as a keyboard shortcut that plays an audio version of the feedback.

Provide Alternatives for Drag-and-Drop and Hotspot Interactions

The following drag-and-drop and hotspot interactions require a mouse for navigation, making them difficult or impossible to use for visually-impaired learners. If you add them to your course, provide text-based or keyboard-controlled alternatives.

Form-Based Interactions:

  • Matching drag-and-drop
  • Sequence drag-and-drop
  • Ranking drag-and-drop
  • Word bank/which word
  • Hotspot

Freeform Interactions:

  • Drag-and-drop
  • Hotspot

For example, you could add a link that opens a layer with a text-based alternative for a drag-and-drop interaction, or you might let learners choose a slider alternative for a hotspot interaction, since sliders respond to the arrow keys on your keyboard.

Don’t Autoplay Videos

Don’t let videos start playing automatically. Visually-impaired learners need full control of video playback.

You control when a video plays by adjusting its properties. To learn how, see this user guide.

And if a video is a demonstration or process, consider giving visually-impaired learners a link to a detailed document that describes the video content.

Use Text with a Contrast Ratio of 4.5:1

Some learners have low vision rather than total blindness. To make your course accessible for low-vision learners, use on-screen text with a contrast ratio of 4.5:1 or higher.

Here’s a helpful contrast checker for determining your contrast ratio.

If you overlay text on a background image, reduce the brightness and/or contrast of the image to make the text easier to read. Or, place a semi-transparent shape between the image and the text to increase the contrast ratio.

Don’t Rely on Color Alone to Convey Meaning

If you use color to provide important context or meaning, be sure to offer text, audio, or image equivalents for learners with color blindness.

For example, if you use green to denote a correct response and red to denote an incorrect response, include audio or on-screen text to convey the same information for learners who can’t distinguish between green and red.

Similarly, don’t rely on color alone to identify hyperlinks. For example, underline text when it has a link, and provide instructions for images with links so learners know they’re interactive.

Color Oracle is "a free color blindness simulator for Window, Mac, and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see."

Offer an Audio Alternative for On-Screen Text

Some learners may be able to see your course but prefer to listen rather than read. They might have learning disabilities such as dyslexia, or they might not be strong readers. Or perhaps your course language is a second language for them.

Consider offering an audio version of text-based slides for these learners. For example, you might play optional narration when learners click a speaker icon or press a keyboard shortcut. h/t Jane Bozarth

And if recording narration seems a bit overwhelming, let Storyline quickly convert your text to speech! You can even choose the voice and language to make sure every word sounds right. Check out this user guide and video demo.

Don’t Use Timed Tests

Give learners the time they need to use the accessible alternatives you’ve added for them. Avoid using quiz timers.

Get Help When You Need It

Want to go deeper? Check out our suggestions for complying with Section 508 accessibility guidelines and Web Content Accessibility Guidelines (WCAG) as well our free e-book on designing accessible e-learning.

Also, visit http://webaim.org for comprehensive web accessibility solutions, including training, tools, and community support.

And when you need help, just post a question at E-Learning Heroes, the largest, most engaged e-learning community in the world. There are over 600,000 members eager to help. Chances are someone has already worked through a problem you’re experiencing and will have wisdom to share.