How to Create an Accessible Accordion in Articulate Storyline (WCAG Compliant)

Creating accessible learning experiences in Articulate Storyline is essential for meeting WCAG standards, and one interactive feature that requires thoughtful design is the accordion. Accordions can reduce visual clutter on a slide while providing a clean, organised way to present information. In this guide, I’ll walk you through how to build a fully functional accordion in Storyline that’s not only interactive but also accessible.

The Basics of Accordions

Accordions are a popular way to hide and reveal content by tapping or clicking a button, which then expands to show additional text or media. In Storyline, there isn't a built-in accordion feature, but you can create one using buttons, triggers, and motion paths. We will focus on making it accessible, ensuring that users with screen readers and keyboard navigation can engage with the content seamlessly.

Building the Accordion

Accordion Layout

First, you’ll need a few buttons that serve as the accordion headers. When clicked, these buttons will trigger the content below them to expand and reveal more information.

Motion Paths

For each accordion section, use a motion path that will expand or collapse content as the user clicks each button. Storyline’s motion path tool allows you to animate the movement, ensuring content flows smoothly in and out.

Layer Triggers

Set up different layers for each accordion section. Use the trigger panel to control when each layer (content block) appears or disappears. For example, clicking a button should show the corresponding layer with expanded content while simultaneously hiding others.

Accordion Backdrops

If you want to create a visual backdrop behind your accordion content, ensure that these elements also follow the expand and collapse triggers.

Accessibility Considerations

A crucial part of building any interactive feature is ensuring it is accessible. Here are a few adjustments to ensure WCAG compliance:

Alt Text and Labels

Each accordion button should be labelled with descriptive alt text. For example, a button labelled "Expand Phone Icon" can be set to announce "collapsed" or "expanded" depending on its state. This ensures that screen readers can correctly interpret the function of each accordion item.

Screen Reader Compatibility

Ensure each button is in the correct focus order, so screen readers can navigate through them logically. You can create variables to store the button states (collapsed/expanded) and announce them when a user navigates through the content using assistive technologies.

Animation Handling

Animations can interfere with the experience of users relying on assistive technology. To avoid this, include a "skip animation" button that jumps the timeline to a point where all content is visible immediately, ensuring users don't miss any information.

Testing and Final Touches

Test your accordion thoroughly, especially with screen readers and keyboard navigation. Ensure that clicking one button hides the others and that each button's expanded/collapsed state is accurately announced. With these features in place, you’ll have an accessible accordion in Storyline that provides all learners with a seamless experience.

Are You More of a Visual Learner?

Conclusion

Building an accordion in Storyline is relatively simple, but ensuring it is WCAG-compliant requires a few extra steps. By adding accessible labels, adjusting the focus order, and considering the role of animations, you can create an inclusive learning environment that caters to everyone.

Let me know your thoughts or if you have any questions. Feel free to share how you’ve built similar features or request additional tips!