Storyline 360 and Storyline 3 let you create courses that support Section 508 accessibility guidelines and Web Content Accessibility Guidelines (WCAG). In this tutorial, you’ll learn how to use important accessibility features in Storyline, such as closed captions, tables, alt text, custom tab order, and more.
Check out the video demonstrations below and use the practice activities to follow along.
- Import Closed Captions for Narration and Videos
- Use Tables to Organize Text for Screen Readers
- Add Alternate Text to Slide Objects and Customize the Tab Order
- Customize Text Labels for Screen Readers and Change the Player Font Size
There are two ways to import captions in Storyline 360 and Storyline 3:
- You can import them simultaneously when you import audio files and videos.
- You can import captions separately, after you’ve added narration and videos to your course.
We’ll practice both options in this activity. Let’s start by importing captions and media at the same time. It’s the easiest, fastest method.
Storyline supports SRT, VTT, SBV, and SUB files generated by third-party captioning services, such as YouTube, Amara, 3PlayMedia. For this activity, however, we’ve provided caption files for you in your practice files.
Make sure your caption files have the same names as your audio/video files and are stored in the same folder. In this way, they’ll automatically import into Storyline when you import your media. Give it a try:
- Open the Storyline folder in your practice files, then open the 07A_Accessibility_360.story file and go to the first slide in the project.
- Go to the Insert tab on the Storyline ribbon and click Video in the Media ribbon group.
- Import the Overview of Tabs Interaction.mp4 video file from your practice files. (We already added the corresponding caption file to the same folder in your practice files.)
- Now, select the video placeholder on the slide and go to the Options tab on the Storyline ribbon.
- Notice that the Overview of Tabs Interactions.srt caption file automatically imported with your video. Brilliant!
- Preview the slide to see how your closed captions look. Click the Preview drop-down arrow on the ribbon and choose This Slide, then click the closed captioning button on the course player.
And don’t worry if you don’t have your caption files ahead of time. You can always import them later. Here’s how:
- With the 07A_Accessibility_360.story practice file still open, go to slide 1.2.
- Select the video placeholder on the slide, then go to the Options tab on the Storyline ribbon and click the plus sign (+) next to Captions.
- Browse to the Text folder in your practice files and import the Closed-Captions.srt file.
- Click the Preview drop-down arrow on the ribbon and choose This Slide to see how your captions look.
Captions are turned off by default, but you can use a trigger to turn them on when your course loads if you’d prefer. Just adjust the built-in variable
True when the timeline of the first slide starts. Either way, learners can always toggle captions on and off using the closed captioning button on the course player.
And if you want to change the font for your closed captions, you can do that, too. Just go to the Home tab on the ribbon, click Player, select Colors & Effects, and choose a Captions font.
New feature! Now you can create and edit closed captions right in Storyline 360 and Storyline 3. Fine-tune imported captions or quickly add new ones with the help of caption placeholders that are already synced with your audio and video content.
- Go to the Storyline folder in your practice files, open the 08A_Tables_360.story file, and go to slide 2.1.
There are duplicate slides in the sample project. The first slide already has a table so you can see the finished example. We’ll recreate the table on the second slide in this activity.
- Go to the Insert tab on the Storyline ribbon, click Table, and create a table with six rows and five columns.
- Enter text in each cell, or use the Table-Data.txt file in your practice files to copy and paste data into each cell.
- Size and position the table where you want it on the slide. To resize rows and columns, you can either drag their boundaries, or you can go to the Table Tools—Format tab on the ribbon and use the cell sizing options.
- Now let’s format the table. Go to the Table Tools—Format tab on the ribbon and select a ready-made style from the Table Styles gallery. (Tip: the default color choices come from your theme colors.)
- Finally, let’s center our table text. Select the table, go to the Table Tools—Format tab on the ribbon, and use the alignment buttons to center the text horizontally and vertically.
Because tables are a valuable accessibility feature, communicating to screen readers how content is organized and providing context for learners, it’s important to add alternate text and a meaningful tab order to tables and cells. See the next practice activity for details.
To learn more about working with tables, see this user guide.
- Open the Storyline folder in your practice files, then open the 07A_Accessibility_360.story file and go to slide 2.1.
Note: Images, such as the ice cream and fish, are silhouetted or grayed-out in the practice file, but you can still use them to practice adding alternate text and changing the tab order.
- Go to the Home tab on the Storyline ribbon and click Tab Order.
- Add descriptive alternate text to each slide object that you want screen readers to read aloud to learners.
- And if there are slide objects that don’t convey meaning or provide context, such as the shelves on this practice slide, simply select them in the Tab Order window and click the garbage bin icon at the bottom of the window to remove them from the tab order. (This doesn’t delete the objects from the slide, it just hides them from screen readers and takes them out of the tab sequence.)
- Sometimes it’s also helpful to change the tab order for slide objects to help learners with screen readers understand the context. Mark the radio button at the top of the Tab Order window to Create custom tab order, then use the Up and Down arrows at the bottom of the window to rearrange your slide objects until the sequence makes the most sense.
- When you’re done adding alt text and customizing the tab order for the slide, click Save to close the window.
Some of the player text labels provide instructions to learners with screen readers. For example, there’s a label that screen readers verbalize when learners tab past the last object on the slide, giving them the opportunity to skip the player navigation buttons and jump back to the first object on the slide. Let’s customize it.
- Go to the Home tab on the Storyline ribbon and click Player.
- When the Player Properties window opens, click Text Labels on the ribbon.
- First, choose a language from the Language drop-down list. This changes the default text labels to your chosen language and identifies the course language for screen readers.
- Next, scroll down the list of text labels till you see Skip navigation screen reader instructions. (The text labels are alphabetized.)
- 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.
- Click OK to close the player properties.
And sometimes it’s helpful to increase the font size for player elements to assist visually-impaired learners. Let’s give it a try.
- Go to the Home tab on the Storyline ribbon and click Player.
- When the Player Properties window opens, increase the Player font size to 120%.
Tip: The player font size can be any percentage between 75% and 200%.
- Notice that the interactive preview pane automatically refreshes so you can see how your increased player font size will appear. Click OK to close the player properties.
Note: Currently, most of the color and font options, such as the player font size, only apply to the standard player, not the responsive player. See these interactive demos for Storyline 360 and Storyline 3 to know which player properties are supported in the responsive player.
In this tutorial, you practiced using Storyline’s accessibility features to help learners with disabilities interact with your courses. See these articles for more information:
In the next tutorial, you’ll learn how to customize the player interface for a Storyline course.