Closed captions play an essential role in ensuring eLearning content is accessible and inclusive. However, when the default player controls is disabled in Articulate Storyline 360, the built-in closed captions button is removed, creating a challenge for developers.
Click Preview to watch how to Add Closed Captions in Storyline 360 without JavaScript or the Default Player.
The good news is that you can still provide a fully accessible learning experience by creating custom closed captions button in Storyline 360, without relying on JavaScript or default storyline player controls.
In this guide, you’ll learn a quick, effective method to add closed captions to your eLearning course using only built-in Storyline features.
About Articulate Storyline 360
Articulate Storyline 360 is one of the most powerful and popular eLearning authoring tools available today. Known for its intuitive interface and flexibility, Storyline 360 allows developers to build highly interactive and accessible learning experiences.
It supports features such as screen reader compatibility, keyboard navigation, customizable player controls and closed captions, all essential components of modern, inclusive eLearning.
Whether you’re designing scenario-based modules or creating e-Learning courses with a fully custom interface, Storyline 360 gives you complete control while maintaining accessibility standards.
Why Add Custom Closed Captions in Storyline 360?
Many designers prefer a clean, modern look and choose to turn off the default Storyline player. However, disabling the player also removes the built-in closed captions (CC) button, potentially impacting accessibility and learner engagement.
Creating a custom CC button ensures your eLearning course remains:
1. Accessible for learners with hearing impairments
2. User-friendly, allowing captions to be toggled on or off
3. Compliant with eLearning accessibility standards such as WCAG
4. Customizable, matching the visual style of your eLearning course.
With a simple setup, you can maintain full control over your eLearning interface while still delivering high-quality accessibility features.
Step-by-Step Guide: Adding Closed Captions without JavaScript or the Player controls
Step 1: Open Your Storyline 360 eLearning Course
Start by opening your project and navigating to the slide where you want to add audio and closed captions.
Step 2: Insert Your Audio File and Preview the Course
Add your audio file to the slide, then click Preview.
You’ll notice that when the player is turned off, the closed captions button doesn’t appear. This is because the default CC control is tied to the player interface.
Step 3: Create a Custom Closed Captions Button
To address this issue, you’ll create your own CC button directly on the slide.
- Close the preview and return to your slide.
- Insert a new button.
- Label it “CC” so learners understand its purpose.
Step 4: Add a Trigger to Control Captions
This step lets learners turn captions on and off using your custom button.
- Select the CC button.
- Open the Triggers panel.
- Create a new trigger with the following settings:
- Action: Adjust Variable
- Media: Player.DisplayCaptions
- When: User clicks the CC button
- Change the action value from Set to Toggle.
This toggle functionality allows your custom button to work exactly like the built-in Storyline captions button.
Step 5: Preview and Test Your Custom CC Button
- Click OK to save your trigger.
- Preview your course again and look for your new on-screen CC button.
- Click the button to confirm that the captions turn on and off as expected.
Benefits of Using Custom Closed Captions in eLearning
By creating your own captions button, you maintain full design flexibility while ensuring your eLearning course remains accessible.
This approach offers several advantages:
1. Works without JavaScript, making it simple and reliable.
2. Compatible with custom-designed interfaces.
3. Enhances learner engagement and comprehension.
4. Supports accessibility best practices in eLearning
Whether you’re designing compliance training, onboarding modules, or interactive scenarios, this method keeps your eLearning course clean, modern and accessible.
Conclusion
Adding closed captions without using JavaScript or the default player in Storyline 360 is not only possible, it’s easy. By creating a custom CC button and applying a simple variable toggle, you can deliver a smooth and accessible learning experience that aligns with your eLearning course design.
This small enhancement improves usability, supports diverse learner needs and helps your eLearning project meet accessibility standards.
Ready to elevate your next eLearning course? Start using custom closed captions to make your Storyline 360 content more engaging, inclusive and learner-friendly.
Frequently Asked Questions (FAQs)
What are closed captions in Storyline 360?
Closed captions in Storyline 360 are on-screen text descriptions that display spoken audio, making eLearning content more accessible to learners with hearing impairments or those who prefer reading along.
Why doesn’t the closed captions button appear when the player is turned off?
The closed captions button is part of the default player interface, so disabling the player removes that built-in functionality.
What accessibility features does Storyline 360 support?
Storyline supports screen readers, alt text, closed captions, focus order, accessible player controls, keyboard navigation and high-contrast settings.
Is JavaScript required to control closed captions in Storyline 360?
No. Storyline’s native variable system allows full caption control without any code.
What’s the difference between subtitles and closed captions in eLearning?
Subtitles represent spoken dialogue only, while closed captions include dialogue plus sound cues—such as music, tone shifts and background sounds—making them more inclusive.
What is the Player.DisplayCaptions variable in Storyline 360?
Player.DisplayCaptions is a built-in system variable that controls whether captions are visible. Developers use it to create custom caption toggle buttons.
