In this step-by-step tutorial, you’ll learn how to improve closed caption accessibility in Articulate Storyline using a single JavaScript trigger. This approach allows learners to control font size, select a font theme, and access closed caption settings directly from the player’s bottom bar.
This solution is useful for eLearning developers and instructional designers who want to improve accessibility without modifying the Storyline player itself.
Why Customize Closed Captions in Storyline?
Closed captions play a critical role in accessible eLearning. However, Storyline’s default caption behavior has a few challenges:
Preview
- No runtime customization options
- Difficult readability on large screens
- Limited usability on mobile devices
By adding a lightweight JavaScript trigger, you can give learners more control and improve the overall learning experience.
Step-by-Step Tutorial
Step 1: Set Up a JavaScript Trigger
- Open your Articulate Storyline project.
- Choose where to add the JavaScript:
- Master Slide (recommended, applies to all slides), or
- First Slide of the course.
- Open the Triggers panel.
- Create a new trigger with the following settings:
- Action: Execute JavaScript
- When: Timeline starts
This ensures the script runs automatically when the course begins.
Step 2: Paste the JavaScript Code
- Click Edit JavaScript in the trigger window.
- Paste the following code into the editor:
This JavaScript enables:
- Closed caption font size control
- Font theme selection via dropdown
- Additional closed caption settings in the bottom player bar
Tip: Make sure the code is pasted exactly as provided to avoid unexpected behavior.
- Click OK to save the trigger.
Step 3: Save the Trigger and Preview
- Save your Storyline project.
- Click Preview or publish the course.
- Enable Closed Captions in the player.
- Confirm that:
- Font size options are available
- Font theme selection is visible
- Closed caption settings appear in the bottom bar
Test the course on both desktop and mobile devices to ensure consistent behavior.
Accessibility and Compatibility Notes
- This solution does not modify the default Storyline player.
- It works with standard Storyline closed captions.
- Best results are achieved when tested across multiple screen sizes.
Final Thoughts and Source file
With a single JavaScript trigger, you can significantly improve closed caption accessibility in Articulate Storyline projects. This approach keeps your courses lightweight while giving learners better control over how captions are displayed.
Hopefully, this tutorial is helpful for the eLearning development and instructional design community, as usual.
