Storyline 360: Removing Object Visibility to Accessibility Tools

When designing e-learning courses, it's important to make sure all learners, including those using screen readers, have an equal experience. One key element in creating accessible content is how you handle decorative images. Decorative elements, while visually appealing, are not essential to the learning experience and can cause unnecessary distractions when read by a screen reader.

In this quick tutorial, we’ll walk through how to prevent these decorative images from being picked up by screen readers in Articulate Storyline, ensuring a smoother and more accessible learning experience.

Step 1: Understanding Non-Text Content

When we talk about non-text content, we’re referring to images, shapes, and other visual elements that are not required for understanding the material. Decorative images, for example, may be visually interesting, but they don’t contribute to the actual learning goals of your course.

For users who are blind or visually impaired, screen readers will attempt to read every visual element, including decorative images. If these images are not properly marked as decorative, screen readers will read file names such as “asset2@2x.png” or “rectangle,” which can clutter the learning experience with unnecessary information.

Step 2: Identifying What Needs to Be Hidden

In most e-learning courses, the essential content would include headings, instructions, and any text that conveys information critical to the learning experience. On the other hand, things like background images, shapes, or personal illustrations of the instructor are typically considered decorative and don’t need to be read aloud by a screen reader.

For example, you may have an illustration of yourself on the slide, which adds a personal touch, but it’s not necessary for the user to understand the course material. Similarly, shapes used to enhance the visual layout are decorative and can be safely ignored by screen readers.

Step 3: Fixing Accessibility Settings in Storyline

By default, all objects on a slide are visible to accessibility tools, including screen readers. This means that when a screen reader navigates your page, it will pick up every visual element — even those you don’t want it to.

Here’s how to prevent that from happening:

1. Select the Decorative Object: Start by clicking on the decorative image or shape that you want to hide from the screen reader.

2. Open the Size and Position Settings: You can access this by right-clicking the object and selecting “Size and Position,” or by using the shortcut Shift + Ctrl + Enter.

3. Navigate to the Accessibility Tab: In the settings window, click on the Accessibility tab.

4. Uncheck ‘Object is Visible to Accessibility Tools’: This option ensures the object will no longer be recognized by screen readers. Simply untick this box, and when you publish the course, the screen reader will skip over this element.

Step 4: Applying the Same Settings to Other Objects

You can repeat this process for other decorative elements on the page, such as background shapes or logos. Each time you untick the visibility option, the object becomes invisible to screen readers, ensuring they only focus on the important content.

The great thing about Storyline is that if you duplicate a page or use the Replace Picture feature, the accessibility settings you’ve applied will carry over. For example, if you have multiple illustrations that are the same size but feature different poses, you can easily replace the image, and the hidden accessibility settings will stay in place. This helps speed up the process while keeping your content accessible.

Step 5: Managing Embedded Objects and States

Be cautious when embedding objects into states within Storyline. Even if you embed an image into a shape or combine objects, they might still be recognized as separate elements by screen readers.

If the embedded object is not hidden in the focus order (the sequence in which a screen reader navigates through the content), it may still be read aloud. To avoid this, always check that objects embedded in states are also marked as invisible to accessibility tools.

Step 6: Save Time by Starting Early

It’s much easier to implement accessibility best practices early in your course development. I recommend setting up a template page with all the decorative content marked as hidden from screen readers. As you build out more pages, you can duplicate this template and replace images as needed, confident that your accessibility settings will carry over.

Are you more of a visual learner?

Conclusion: Keep Your Content Accessible

Ensuring that decorative images are hidden from screen readers is a small but important step in making your e-learning content more accessible. By following these simple tips, you can ensure a smoother, more inclusive experience for all your learners, regardless of their abilities.

If you’d like more tips on creating accessible e-learning content, or to have us build your content for you, feel free to reach out!