Browse Articles

Browse Articles

Storyline 3: How to Design an Accessible Course

Article Last Updated

This article applies to:

Storyline 3

In e-learning, accessibility ensures that your content is designed for all learners, regardless of their abilities. Creating an accessible course isn't just something you must do to meet standards, such as the Web Content Accessibility Guidelines (WCAG) and Section 508. When you enhance the accessibility of your content, everyone benefits.

This article teaches you specific ways to help learners interact fully with your Storyline 3 courses.

Design Your Course with Accessibility in Mind

You want all learners, including those with visual, motor, auditory, speech, or cognitive disabilities, to understand, navigate, and interact with your course. Make learners immediately comfortable with the layout and design by providing accessibility instructions at the beginning of your course. 

Here are some best practices to lean into as you design your course.

  • Use a consistent design. A consistent design makes a website easier to navigate and understand. Format text styles and slide masters to look the way you want, then reuse them throughout your course.
  • Eliminate distractions. Busy designs can cause people with cognitive disabilities to miss important information. You'll want to avoid clutter, keep animated objects to a minimum, and use white space to improve legibility and readability.
  • Use plain language. Straightforward and clear language appropriate for your content helps your audience read and understand the information. 
  • Use accessible fonts. Format your design to increase the readability by using plain and straight fonts, such as Sans serif fonts. Don't use all-caps formatting since it's challenging to read.
  • Use descriptive links. Give learners hyperlinks with the proper context of where clicking the link will take them. For example, "click here" doesn't tell learners what the link does. Hyperlink a specific phrase instead: "read our policy statement."
  • Give learners clear feedback. Learners must get confirmation when they complete an action, and error messages should provide clear direction.
  • Provide text-based alternatives. Use text to communicate important details. If you use images or animations to provide essential context, offer text-based alternatives for learners with visual impairments. For example, use alternative (alt) text to describe images. Or, 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 use flashing content. In the case of photosensitive epilepsy, flashing can trigger seizures. Animations, GIFs, and videos shouldn't flash, blink, or flicker more than three times per second.

Make Content Accessible to Screen Readers & Keyboards

Learners with visual impairments often use screen readers to navigate e-learning courses. Storyline 3 supports JAWS, NVDA, VoiceOver, and TalkBack screen readers with our supported browsers. Other learners may rely solely on keyboards or keyboard alternatives to navigate online content.

Visual impairments cover a broad spectrum, including low vision, color blindness, and total blindness. It also includes 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 visual content accessible, as described below.

Customize the Focus Order to Provide Meaningful Context

The focus order you define for each slide in Storyline 3 controls the reading order for screen readers and the tab order for interactive elements, such as buttons, hotspots, and data-entry fields. Customize the focus order for each slide to make the most sense. 

Identify the Course Language 

Storyline 3 adds a language code for screen readers to your published story.html file based on the language you select for your text labels. You can easily switch to another language or a different set of custom text labels.

Customize the Text Labels

Screen readers use text labels to describe buttons, messages, screen reader instructions, and other player controls. Here's everything you need to know about working with text labels in Storyline 3.

Allow Learners to Skip Player Navigation Elements

Let learners skip repetitive navigation throughout your course. When keyboard-only users and screen reader users tab past the last object on a slide, they have an option to go back to the top of the slide, bypassing all the player controls. They can press the spacebar or Enter key to activate the skip navigation shortcut and return to the top of the slide. Or, they can press the Tab key to proceed to the player controls.

Tip: The skip navigation shortcut is enabled by default, so learners don't have to navigate through all the player features to hear the slide content again. If you need to turn it off, you can disable the skip navigation shortcut.

Choose Visible Focus Indicator Colors

When learners navigate using a keyboard, an outline—called a focus indicator—highlights the currently selected object. Without a focus indicator, these learners won't know where they are on the page—so it's essential.

In Storyline 3, you can change the focus indicator color to complement your course design.

Make Images Accessible

Add Alternative Text 

Non-text content needs alternative text (alt text) to describe its meaning to learners using assistive technologies, such as screen readers. The good news is it's easy to add alt text in Storyline 3.

You only need to add alt text to objects that convey meaning or context to the learner. Hide purely decorative images and shapes from accessibility tools when they don't contribute to the purpose of the content. Otherwise, screen reader users will be fatigued by unnecessary announcements.

Check out these 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—no need to include any on-screen text.
  • Be concise without skimping on relevant information.
  • Don't include "image of" and "graphic of" and just provide the information needed.
  • Don't use abbreviations and excessive punctuation such as ***, which screen readers will annoyingly read as "asterisk, asterisk, asterisk."

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? It's easy to set the font size from any percentage between 75% and 200% in your player settings.

Make Audio and Video Content Accessible

Don't Autoplay 

People using screen readers navigate by listening, so don't allow audio or video content to start playing automatically. Let your learners control playback. Here's how to adjust video properties.

Add Closed Captions

Captions are a text version of the audio needed to understand the content. Import closed captions or create closed captions right in Storyline 3 with the built-in editor. It's easy to do and produces big dividends.

Plus, closed captioning isn't just for learners with hearing impairments. If your course is a second language for learners, captions might help them fully understand the content. And learners in noisy surroundings will appreciate captions too.

Provide a Transcript

Transcripts are audio converted to written text. They are different from closed captions, which are time-coded frames. Consider adding a transcript via the player notes panel for each slide or a downloadable attachment for the entire course. Be sure to include necessary details in the written transcript conveyed visually in images and videos so learners have all the information.

Make Text Accessible

Use a Contrast Ratio of 4.5:1

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

If you overlay text on a background image, reduce the brightness and 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.

To quickly determine the contrast ratio, try this web-based contrast checker or download this contrast checker tool.

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, might not be strong readers, or might be in a busy environment where they can't focus on the screen. 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 could play optional narration when learners click a speaker icon or press a keyboard shortcut. 

Use Accessible Text and Text Styles

The accessible text in Storyline 3 lets learners personalize the size and style of text by using custom stylesheets or browser extensions, making it more readable and accessible than ever.

Accessible text styles in Storyline 3 create more design consistency and help screen readers. That's because text styles share the hierarchy of information with screen readers so they can identify and announce headings, hyperlinks, quotes, and paragraphs.

Another vital thing to consider is text size. After all, if your copy is too small, learners might have trouble reading it. 

Enable Accessibility Controls

Empower learners to personalize their experience by turning on the accessibility controls in the course player. These controls allow learners to change the zoom mode, turn accessible text on or off, and toggle keyboard shortcuts.

Make Interactive Content Accessible

Creating interactive content keeps your learners engaged. The two most common interactive elements are navigation features and quizzes. In addition, Storyline 3 has many interactive objects, such as buttons and data-entry fields, for you to create interactive slides.

Don't Rely on Color Alone to Convey Meaning

If you use color to provide important context or meaning, offer text, audio, or image equivalents for learners with color blindness. For example, if you use green to indicate a correct response and red to indicate 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 with a link, and provide instructions for images with links, so learners know they're interactive.

Ideally, it's best to work with someone who has color blindness so you can ensure the best possible experience. Color Oracle is a free color blindness simulator if that's not an option. It takes the guesswork out of designing for color blindness by showing you what people with common color vision impairments will see in real-time.

Don't Rely on Hover States Alone to Display Details

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. Consider providing a keyboard-accessible alternative if you use hover states to display text or images. For example, it's OK to change the color of a button when a mouse hovers over it to indicate that it's a clickable object. Still, you wouldn't want to display feedback text in the hover state without 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 Set Time Limits

Timers can prohibit the learner's ability to use the accessible alternatives you've added or may create a focus obstacle. Avoid quiz timers and refrain from using triggers to create timed interactions when possible.

Offer Tips About Quiz Questions

When a quiz question accepts more than one answer choice, include directions for screen reader users. Sample tips include: Multiple answers are possible, Select all that apply, and Fill in the blank.

Provide Alternatives for Drag-and-Drop Interactions

Drag-and-drop interactions require a mouse for navigation, making them difficult or impossible to use for learners with mobility impairments. If you add them to your course, provide text-based or keyboard-controlled alternatives. For example, you might use a keyboard-accessible interaction, such as a matching question or a slider interaction. You could also give learners a detailed text description of the information they need to know from the interaction.

Get Help When You Need It

Want to go deeper? Check out our Storyline 3 Voluntary Product Accessibility Template® (VPAT®) and our free e-book on designing accessible e-learning.

Also, visit https://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 1,000,000 members eager to help. Chances are, someone has already worked through a problem you're experiencing and will have the wisdom to share.