Storyline 360: How to Design an Accessible Course

Creating accessible e-learning isn’t about checking boxes. Of course, meeting standards such as the Web Content Accessibility Guidelines (WCAG), Section 508, and EN 301 549 is critical when developing your courses. Hitting those marks helps ensure that content is designed for all learners, regardless of ability. But enhancing the accessibility of your content benefits everyone—and that makes your e-learning more effective overall.

This article provides accessibility-boosting strategies to help all learners fully engage with your Storyline 360 courses.

• Design with Accessibility in Mind
• Make Content Accessible to Screen Readers & Keyboards
• Make Images Accessible
• Make Audio and Video Content Accessible
• Make Text Accessible
• Make Interactive Content Accessible
• Get Help When You Need It

Design with Accessibility in Mind

Accessibility doesn’t happen by accident. If you want all learners—including those with visual, motor, auditory, speech, or cognitive disabilities—to be able to understand, navigate, and interact with your course, you have to make decisions as the course author and start with that goal in mind.

Lean into these best practices as you design your course.

• Provide accessibility instructions upfront. To ensure learners are comfortable with the layout and design, begin your course with accessibility instructions. Clearly explain any features or settings that enhance usability, such as what the learner's choices are when the accessibility settings menu is available and how to access the list of keyboard shortcuts. Starting with these instructions creates a more inclusive and welcoming learning environment for everyone.
• Stay consistent. Consistent design and navigation make your course easier to follow and understand. Consistency helps learners focus on the content—not any changes in the design. Plus, learners with disabilities can more easily predict and navigate a consistent course structure. Setting up text styles and slide masters and reusing them throughout your course can help you stay on track.
• Maintain focus. Busy designs can cause people with cognitive disabilities to miss important information. To create a more effective learning experience, avoid clutter, keep animated objects to a minimum, and avoid images of text. Enable the player full-screen toggle to help learners focus on the content. Use white space to improve legibility and readability. By simplifying your design, you ensure that key points are clear and accessible to everyone.
• Use plain language. Straightforward and clear language appropriate for your content helps your audience read and understand the information. In addition, strive to use inclusive language. For example, choosing terms like “select” instead of “click” accommodates usability on all types of devices, from desktops to smartphones, and providing a glossary for acronyms and complicated terms helps learners easily understand the content.
• Use descriptive links. Hyperlinks should tell learners where the link will take them. Instead of using a vague phrase like "Click here," use something specific like "Read our policy statement." This approach helps all learners understand and engage with your content more effectively.
• Give clear feedback. Ensure learners get confirmation when they complete an action, helping them feel confident about their progress. Error messages should also be informative and helpful, offering clear directions on how to correct mistakes. By guiding learners through the course, you’ll reduce frustration and improve their understanding of the material.
• Make content safe for all learners. Content that flashes, blinks, or flickers more than three times per second can trigger seizures in people with photosensitive epilepsy, so stick with non-flashing animations, GIFs, and videos. Users should also be able to pause any strobe effects or animations. Following these guidelines helps keep the learning experience safe and inclusive for everyone.
• Offer multiple ways to navigate. Your course should offer various navigation options, including menus, search functions, and clickable elements, to accommodate different user preferences and needs. This makes it easier for learners to find and interact with the content.
• Allow both portrait and landscape modes. Keep the responsive playback properties unrestricted so your course works seamlessly in both portrait and landscape orientations. You want to provide learners with a flexible experience that adapts to their needs and preferences and allows them to access the content comfortably on any device.

Make Content Accessible to Screen Readers & Keyboards

Visual limitations cover a broad spectrum, including low vision, color blindness, and total blindness. Learners who find it difficult to read on-screen text due to learning disabilities or because the course language is not their first language can also benefit from more accessible visual content.

Some learners with visual limitations use screen readers to navigate e-learning courses. Storyline 360 supports popular screen readers like JAWS, NVDA, VoiceOver, and TalkBack with our supported browsers. Some learners may rely solely on keyboard or keyboard alternatives to navigate content. (Click here for information on how your learners navigate slide content with a keyboard or screen reader.)

Read on for tips on making your visual content accessible.

Customize the Focus Order

The focus order you set for each slide controls the reading order for screen readers and the tab order for interactive elements like buttons, hotspots, and data entry fields. Customizing the focus order to ensure that screen readers present the content logically and intuitively enhances the learning experience for users with visual disabilities.

Identify the Course Language

Setting the course language allows screen readers to interpret and present the content accurately. Storyline 360 automatically adds a language code based on the language you selected for your text labels to the story.html file when you publish your course. This flexibility allows you to create tailored experiences for diverse audiences.

Customize the Text Labels

Screen readers use text labels to describe buttons, messages, screen reader instructions, and other player controls. You can easily customize your text labels with specific terminology and phrasing. This customization can help learners better understand the content, especially if the default labels don't align with your course's context.

Note: Player controls and navigation buttons display tooltips accessible to mouse, keyboard, and screen reader users.

Allow Learners to Skip Player Navigation Elements

Allowing learners to skip repetitive navigation elements in your course benefits keyboard-only users and screen reader users. The skip navigation shortcut button can be accessed by pressing the spacebar or Enter key to return to the top of the slide once the last object on a slide is completed. Learners can choose to bypass all player controls, or they can press the Tab key to proceed to the player controls.

Tip: The skip navigation shortcut is enabled by default, and we recommend keeping it enabled for accessibility. However,  you can disable it if needed.

Choose Visible Focus Indicator Colors

Keyboard users need to be able to see selected objects easily. A clear focus indicator can help learners navigating with a keyboard know where they are on the page.

In Storyline 360, you can customize the focus indicator with two colors. Setting a contrasting 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 the slide text. Ensuring that player elements such as buttons, sidebar tabs, and pop-up messages are easily readable for all learners is essential. In your player settings, you can set the font size to any percentage between 75% and 200%. This flexibility allows you to tailor the player font size to keep all text clear and legible for everyone in your audience.

Expand Beyond Using Color

Make sure color isn’t the only way you’re sharing information in your course. For example, if you’re using color to indicate correct and incorrect answers or to distinguish data on graphs and charts, also include text labels, patterns, shapes, or icons. That way, all learners—including those with color blindness or visual disabilities—can understand and engage with your content.

Make Images Accessible

Making images accessible is essential for learners who depend on alternative text (alt text) to understand visual content. Accessible images also benefit learners with cognitive disabilities and non-native speakers of the course language, helping them grasp the images’ context and purpose.

Read on for tips on making your images accessible.

Provide Text-based Alternatives

Rely on text, not images, to communicate important details. If you need to use images or animations to share essential context, offer text-based alternatives for learners with blindness or limited vision. For example, use alternative text to describe images or add an optional link to an animated slide to open a static, text-based layer with the same information for learners using screen readers.

Add Alternative Text

Non-text content needs alternative text (alt text) to describe its meaning to learners using assistive technologies. Add alt text to objects that convey meaning or context to the learner. Purely decorative images and shapes can be hidden from accessibility tools to prevent unnecessary announcements that can fatigue screen reader users.

Our on-demand webinar, How to Write Alt Text for E-Learning, offers more specific strategies. The following tips for writing good alt text can help you get started:

• Be descriptive and specific. Clearly describe the content, function, and context of the image. You should have enough detail that someone who cannot see the image will still understand its purpose. Don’t include repeating phrases like "image of" and "graphic of.” Screen readers announce this by default.
• Keep it short. Aim for brief descriptions that convey the essential information. We recommend that alt text be less than 150 characters.
• Write clearly. Abbreviations and excessive punctuation marks may confuse screen readers, so use complete words and limit punctuation to guarantee clarity. For example, *** will be read literally as “asterisk, asterisk, asterisk.”

Use Captions and Descriptions

Captions and detailed descriptions provide additional context, especially near complex images like charts or diagrams, and ensure that all learners, including those using screen readers, can fully understand the content. Offering text descriptions also benefits users with visual disabilities and those with difficulty interpreting visual information.

Make Audio and Video Content Accessible

Audio and video content can present challenges for learners who are deaf or hard of hearing, have cognitive disabilities, or those who are non-native speakers of the course language. Making audio and video content accessible ensures inclusivity and enhances comprehension for a wider audience.

Read on for tips on making your audio and video content accessible.

Allow Full Media Control

People using screen readers navigate by listening, so audio or video content that starts playing automatically can be disruptive. To manage their learning experience, let your learners control playback. Here's how to adjust video properties to prevent autoplay and allow learners to choose a playback speed.

Enable the accessible video controls in Storyline 360's modern player for a more inclusive experience for all learners. These controls ensure that all users, including those with disabilities, have maximum flexibility when consuming video content.

Add Closed Captions

Adding closed captions—text accompanying audio or video content—helps all learners fully engage with and comprehend your content. Closed captions don’t just benefit learners who are deaf or hard of hearing. They also assist those non-native speakers of the course language and anyone accessing a course in a noisy environment. You can import or create closed captions right in Storyline 360 with the built-in editor.  

Storyline 360 lets you position captions at the top or bottom of your slides and customize the foreground and background colors to maximize readability. The output also supports Live Caption in Google Chrome.

Provide a Transcript

Transcripts also convert audio into written text, but they differ from closed captions, which appear in time-coded frames as a comprehensive alternative to audio content. Synchronized video transcripts can be automatically generated from closed captions and should also include descriptions of narration, sound effects, and other audiovisual elements. Including these elements boosts accessibility for all learners, especially those who are deaf or hard of hearing or prefer reading over listening.

Include Audio Descriptions

For video content, provide audio descriptions that narrate important visual details not conveyed through dialogue. This practice is essential for learners with visual disabilities to receive all the necessary information and understand the content thoroughly, but it also creates a more inclusive learning experience overall.

Use Clear and Simple Language

The language in your audio and video content should be straightforward and easy to understand. Plain language is crucial for learners who are non-native speakers or those with cognitive disabilities, and it helps all learners comprehend the material more effectively.

Make Text Accessible

Text content can present challenges for learners with visual impairments, dyslexia, cognitive disabilities, or those who are non-native speakers of the course language. Making text accessible allows you to support all learners in understanding the material.

Read on for tips on making your text content accessible.

Use Accessible Fonts

Make design choices that maximize readability to improve accessibility for all learners, especially those with visual disabilities and reading difficulties. Use plain, sans-serif fonts, a minimum font size of 12 points, standard capitalization, sufficient color contrast, and bold for emphasis. For left-to-right languages like English, align text to the left.

Ensure a Contrast Ratio of 4.5:1

To keep your course easy to read and accessible for learners with low vision, ensure that on-screen text has a contrast ratio of 4.5:1 or higher against the background color. If you overlay text on a background image, reduce the image's brightness and contrast to improve readability. Alternatively, place a semi-transparent shape between the image and the text to increase the contrast ratio.

You can use a web-based contrast checker or download a checker tool to determine the contrast ratio quickly. 

Offer an Audio Alternative for On-Screen Text

Some learners may prefer to listen rather than read due to having a learning disability such as dyslexia, being in a busy environment, or operating in a second language. To accommodate these learners, consider providing an audio version of text-based slides. You can set the optional narration to play when learners select a speaker icon or press a keyboard shortcut.

Since Storyline 360 can quickly convert your text to speech, offering this option is easy. You can even choose the voice and language to ensure clarity and accuracy.

Use Accessible Text, Styles, and Autofit

Storyline 360 offers several options to boost text accessibility, including:

• Accessible text. Using accessible text allows learners to personalize the size and style of text using custom stylesheets or browser extensions, enhancing readability.
• Accessible text styles. Create design consistency and aid screen readers with accessible text styles. This option shares the information hierarchy with screen readers, enabling them to effectively identify and announce headings, hyperlinks, quotes, and paragraphs.
• Text autofit improvements. Small text can be challenging to read, but with text autofit improvements, you can set text boxes to a fixed size without shrinking the text if it overflows. Preventing the text from shrinking means your content will remain legible for all learners, regardless of their device.

Enable Accessibility Controls

Accessibility controls available in the course player allow learners to adjust the zoom mode, toggle accessible text on or off, and manage keyboard shortcuts. Enabling these controls lets all users, including those with visual or motor disabilities, tailor the course to their specific needs and preferences.

Make Interactive Content Accessible

Including interactive content in your courses helps keep learners engaged. While the two most common interactive elements are navigation features and quizzes, Storyline 360 also has many other interactive objects. Elements such as buttons and data-entry fields allow you to create interactive slides that hold learners' interest.

Interactive content is often assumed to be inaccessible due to common barriers like keyboard navigation issues and screen reader incompatibility. However, implementing a few key practices makes your interactive content accessible to all learners.

Read on for tips on making your interactive content accessible.

Ensure Buttons are 44 x 44 Pixels or Larger

Adjusting the size of your buttons to at least 44 x 44 pixels is a quick and effective way to enhance accessibility. Larger buttons reduce the effort required to click accurately, ensuring a smoother and more inclusive user experience for all learners, including those with motor disabilities. In addition to maintaining a minimum size, buttons should have sufficient color contrast and be clearly labeled, as described in the next section.

Note: All the modern player controls meet the latest guidance for minimum target size in WCAG 2.2.

Provide Clear Labels and Instructions

All input fields and buttons should have clear, descriptive, accurate labels and instructions. Use consistent naming conventions throughout your course’s input fields to help learners understand and navigate the content more easily, including those using screen readers. Clear labeling also supports users with cognitive disabilities by providing straightforward and predictable interactions.

Don’t Depend Only on Color Cues

Relying solely on color to convey meaning can exclude learners with color blindness or low vision. Include text, audio, or image equivalents to help all learners fully engage with and understand your content. For example, if green indicates a correct response and red an incorrect one, add audio cues or on-screen text to convey the same information.

Similarly, don't depend on color alone to identify hyperlinks. Underline linked text and give clear instructions for images with links so learners know they are interactive.

For best results, consult someone with color blindness to check your design’s accessibility. If that's not possible, tools like Color Oracle, a free color blindness simulator, can show you how your design appears to those with color blindness.

Offer Alternatives to Hover States

Hover states effectively convey interactivity by changing the appearance of an element, like a button or link, when the mouse pointer is placed over it. But since not everyone uses a mouse to navigate, hover states alone shouldn’t be used to display important information. Always provide a keyboard-accessible alternative for hover states that display text or images.

For example, you can change the color of a button on hover to indicate it's clickable, but any feedback text should also have an alternative. To avoid confusion, consider using keyboard shortcuts that play an audio version of the feedback.

Additionally, any hover state information should be accessible to screen readers. Consider using focus states to allow keyboard-only users to access the same information.

Allow Flexible Timing

Quiz timers and timed interaction triggers can add unnecessary stress to the learning environment. Avoiding timers in your course allows learners to work at their own pace, giving everyone, including those with disabilities, ample time to use accessible alternatives and complete tasks.

Include Clear Tips and Error Identification for Quiz Questions

Instructions and feedback should be clear and concise and placed in prominent locations near quiz questions. Make quiz questions accessible by including directions for screen reader users when multiple answers are possible. Sample tips include: "Multiple answers are possible," "Select all that apply," and "Fill in the blank."

Additionally, providing clear feedback helps learners identify and correct input errors. Specific messages should indicate what went wrong and offer suggestions for correction. For example, if a learner selects an incorrect answer, you could provide feedback like, "Incorrect. Remember to consider all factors mentioned in the text." For fill-in-the-blank questions, you could say, "Incorrect. Check your spelling and try again."

Clear instructions and feedback help all learners, particularly those using screen readers, understand how to respond accurately and engage fully with the quiz content.

Create Accessible Quiz Result Slides

Storyline 360 offers accessible quiz result slide templates with modern designs that meet color, contrast, and focus guidelines by default. You can also define custom theme colors for correct and incorrect quiz elements. Use these result slide templates to quickly create quiz results that help all learners, including those with visual disabilities, easily understand their performance.

Provide Alternatives for Drag-and-Drop Interactions

Because they require mouse navigation, drag-and-drop interactions can be challenging or even impossible for learners with mobility disabilities. To ensure accessibility, provide text-based or keyboard-controlled alternatives. Keyboard-accessible interactions include options like matching questions and slider interactions. Additionally, a detailed text description of the information conveyed in the drag-and-drop interaction should be included.

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.

Incorporate Accessibility Features for 360° Images

360° images are panoramic photos that create immersive learning experiences, such as virtual tours and exploratory activities. Add alt text to the media, buttons, markers, and hotspot labels to give learners using screen readers access to the same information, ensuring all learners can engage fully with these interactions.

Storyline 360 also offers accessible navigation, enabling learners to explore 360° images using a keyboard or screen reader.

Use Dialog Layers

Create more intuitive and inclusive interactions by turning standard layers into dialog layers. When a learner encounters a dialog layer, the keyboard dims everything else in the browser window to focus on the modal dialog and its contents. This focus means the learner can’t interact with other course elements while the layer is open.

Learners can navigate dialog layers using a screen reader or keyboard. To improve the screen reader experience, define accessibility attributes, including an alternative title and description for the dialog layer.

Get Help When You Need It

Storyline 360 empowers you to create courses that support WCAG 2.1 Level AA. You can find detailed information on the success criteria in our Voluntary Product Accessibility Template® (VPAT®). However, please note there are 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. Despite these exceptions, Storyline 360 offers robust features to help you build accessible and engaging learning experiences.

Are you looking to dive deeper? Explore our All About Accessibility Series, Accessibility Index, and webinars on accessibility.

If you need more help, post a question at E-Learning Heroes, the world’s largest community of course creators with over one million members. There, you’ll find a wealth of knowledge and support from people who have likely encountered and solved the same issues.