Browse Articles

Browse Articles

Storyline 360: How to Design an Accessible Course

Article Last Updated

This article applies to:

Storyline 360

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 360 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 how 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, enable the player full-screen toggle, 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 readability 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 blindness or limited vision. 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.

Storyline 360 empowers you to create courses that support WCAG 2.1 Level AA. Specific details on success criteria are outlined in our Voluntary Product Accessibility Template (VPAT). Exceptions: Storyline 360 doesn't support 1.3.5 Identify Input Purpose for data-entry fields or 3.1.2 Language of Parts for multiple screen reader languages in the same course.

Make Content Accessible to Screen Readers & Keyboards

Learners with blindness or limited vision often use screen readers to navigate e-learning courses. Storyline 360 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. Click here for information on how your learners navigate slide content with a keyboard or screen reader.

Visual limitations 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 360 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 360 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 360.

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 can 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 360, you can choose two focus colors. A two-color focus indicator helps learners see the focus rectangle on dark and light backgrounds.

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

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."

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.

Take Advantage of Accessible Video Controls

Enable Storyline 360 accessible video controls in the modern player to provide a more inclusive experience for all learners.

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 360 with the built-in editor. It's easy to do and produces big dividends.

Plus, closed captioning isn't just for learners who are deaf or hard of hearing. 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. Automatically generate synchronized video transcripts from closed captions.

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. 

Let Storyline 360 quickly convert your text to speech if recording narration seems overwhelming. You can even choose the voice and language to ensure every word sounds right.

Use Accessible Text, Text Styles, and Text Autofit

The accessible text in Storyline 360 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 360 create more design consistency and help screen readers. That's because text styles share the information hierarchy 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. With text autofit improvements, you can set text boxes to a fixed size without shrinking the text if it overflows—so you know your learners will be able to read it easily.

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

Create Accessible Quiz Result Slides

Storyline 360 includes accessible quiz result slide templates with fresh designs meeting color, contrast, and focus guidelines and the option to define custom theme colors for correct and incorrect quiz elements. Use the new result slide templates to quickly create quiz results that are accessible by default. 

Provide Alternatives for Drag-and-Drop Interactions

Drag-and-drop interactions require a mouse for navigation, making them difficult or impossible 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.

Want to design a keyboard-accessible drag-and-drop interaction? Check out Sarah Hodge's downloadable example and the free webinar where she explains how to build it.

Add Accessibility to 360° Images

A 360° image is a panoramic photo that creates immersive learning experiences, such as virtual tours and exploratory activities.

Add alt text to the media, buttons, markers, and hotspot labels in 360° interactions so all learners can have the same engaging experience. We've built-in accessible navigation so your learners can use a keyboard or screen reader.

Use Dialog Layers

Turn a standard layer into a dialog layer to make interactions even more intuitive and inclusive. When learners encounter a dialog layer, the keyboard focus stays on the modal dialog and its contents by dimming everything else in the browser window so learners can't interact with anything else in the course while the layer is open.

Learners can navigate dialog layers with a screen reader or keyboard. Enhance the screen reader experience for dialog layers by defining accessibility attributes for an alternative title and description.

Get Help When You Need It

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

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.