Table of Contents

4 Tips for Creating More Accessible eLearning Courses in Storyline using Alt Text

Accessibility

What is Alt Text?

Alternative text (aka an alt tag) is descriptive text used in a digital environment that describes a visual image or object and its function. Screen readers will read the alt text aloud so that learners with visual impairments can better understand what is on the screen.

In Articulate Storyline, everything you add to the screen – things like objects, text boxes, characters and images – comes with default alt text that a screen reader will read, unless you remove it. For example, in the image below, shapes, icons, and text are all placed to create a slide layout with navigation. This makes the screen look nice, but sometimes the default alt text can be confusing (or nonsensical) for someone using a screen reader. In this example, a  learner using a screen reader will hear things such as: “Text box 1,” “Menu icon 1,” ”Right triangle 2”. This is where the choice to either update the alt text or remove it from visibility comes in. 

image1 slidemaster layout
Slide layout displaying shapes, icons, and text.

When Should You Edit Alt Text?

I use the following guiding questions: 

  • Will the learner engage with the object? 
  • Will they be required to click it or interact with it in any way? 

If so, I need a specific word or phrase I can add as alternative text for the object so that the learner will know what to do with it. Examples may include buttons, click-to-reveal objects like images or shapes, and drag-and-drop objects. If the learner does not need to engage with the object, remove the visibility of the alt text. 

Returning to the example above, the arrows are actually png images. The default alt text for each of those arrows would be “next_arrow.png”. As you can imagine, that’s not a helpful phrase for someone using a screen reader.

Because the learner will be interacting with this arrow, I would update the alt text on the arrow to simply read “Next”.

When to Add Alt Tags for Images

image2 backgroundphoto
Slide layout with background photo and navigation buttons.

Take a look at the image of a slide design above. Would alt text be appropriate on the background photo of the pencil and book on this slide? I would say no. The photo is there for visual design and engagement, not to educate or explain content. 

Male icon depicting 58%.

Some images may require alt text, but that will depend on your specific project and the instance in which the image is being used. With images, I always ask myself, “Is this image displaying something that the content isn’t sharing?” This helps me determine if an image will need alt text. For example, the image to the left shows a graph illustration that is intended to give someone information at a glance. For someone relying on a screen reader, the information via alt text will be an essential part of the learning experience. The updated alt text to this image could be, “58% of men like to watch football on Sunday.” 

Alt Text for On-screen Text?

In general, text that appears on the screen is either read by the learner or read to the learner through voiceover audio. If a course does not have voiceover audio, it is imperative that all of the alt text is identical to the on-screen text. This will allow accessibility tools to see this text and share it with the learner. 

On-screen text is any text that is visible on the screen including content, titles, and labels. By default, all text boxes will update the associated alt text, but it’s always best practice to verify this. Storyline handles on-screen text differently than most standard web tools where the text alone is enough to be read.

How to Edit Alt Text in Storyline

To access an object’s Accessibility properties, right-click the object on the slide or in the timeline, then click “Accessibility.” Here is where you can remove visibility of an object or update the alt text.

image3 accessibility properties GIF
GIF on how to access Accessibility tools within Articulate Storyline.

In the Accessibility properties for an object, there is an option to check or uncheck “Object is visible to accessibility tools.” This remains checked (and the alt text updated) if you expect the object to remain visible to screen readers. If you uncheck this box, it will make that object not visible, so screen readers won’t see it and it won’t appear in the Focus Order. 

Where to check or uncheck the option to make an object visible to accessibility tools in Articulate Storyline.

What’s the Focus Order? Great question.

The Focus Order is basically a list that contains the objects that are visible to accessibility tools, such as screen readers, on the particular slide, layers, and even master slide you are working on. 

Image5 FocusOrder panel
The Focus Order panel in Articulate Storyline.

There are two columns within the Focus Order: on the left are the shapes and objects contained within your slide, and on the right is the alt text for each object that will be read by screen readers. If the alt text column is blank, the screen readers will read the labels from the left column (which could be very confusing to our learners). 

image6 Focus order GIF
How to edit the Focus Order panel within Articulate Storyline.

Via the Focus Order you can update alt text, add and remove objects from the list (except those on the master slide; they will need to be made non-visible via the Slide Master), and reorder objects. Accessibility tools will read objects in the order that they are listed in the Focus Order, so it’s important to have only the objects you want visible to these tools on this list and in the order you’d like them shared with your learners.

4 Tips and Tricks to Improve Your Storyline Alt-Tagging Workflow

Here are four tips and tricks I use when incorporating alt text in Storyline modules. 

1. Do what you can in the slide master.

Everything in the slide master, just like on regular slides, will have default alt text. If you put more time into removing or updating the alt text in slides within the slide master (such as when designing a template), it will save you time in the future when the course is in development. This is the lowest level of accessibility you can add in Storyline so it should easily become a habit for you. Many times, I will add most of the navigation on the slide master. Once those objects have the appropriate alt text, I don’t have to worry about them again. Remember to do this on all objects, including background imagery and shapes. 

2. Consider updating alt text BEFORE duplicating slides.

Have you ever spent an abundance of time creating and testing one slide so perfectly for the purpose of duplicating it to use again? I have; I do it almost every day. 

Now imagine that after duplicating slides, you realize you didn’t update the alt text to the original slide. Updating the alt text to each of the duplicated slides can eat up A LOT of your time. This has happened to me quite a few times, and I’ve learned through these unfortunate experiences that removing or updating alt text from the original slide, before duplicating, is the best use of my time. 

3. Apply to ALL INSTANCES of an image.

At Endurance Learning, we like to work smarter, not harder, and one thing we’ve learned about Storyline through updating alt text, is that we can easily apply alt text to an image file that appears multiple times in a module. 

A perfect example of this is the Next button. No matter if I use a button, shape, or icon for the Next button in a course, I always save it as a PNG and then reinsert it into the course. Once it’s in the course, I can update the alt text, click the “Apply to All” symbol, and that alt text is on every Next button throughout my course. 

Be careful, though, because this can be a catch-22 if you’re using the same button for other things. Say you take the image you’ve used for the Next button and flip it to make a Back button. The alt text will still say ‘Next’ unless you update it on that object. If you select “Apply to All” on this new Back button, proceed with caution, because it will update all matching files to now read ‘Back.’ Your safest route is to create separate PNG files for each of these objects and apply alt text to them accordingly. 

You can “Apply to All” by right clicking on the object > Accessibility or by locating the image within the Media Library. (See images below)

image7 applytoall
How to apply alternate text to objects of the same type in Articulate Storyline.
image8 applytoall medialibrary
Accessing the Apply to All alt text feature via the Media Library in Articulate Storyline.

4. Remove alt text from multiple objects using the timeline.

Since Storyline has made the update where multiple objects in the timeline can be selected and moved at one time, the alt text game has also improved. Instead of selecting one object via the timeline, right-clicking and opening the accessibility properties, one can now select multiple objects at one time (say only the objects that need alt text removed), right-click for the accessibility properties, and remove the alt text from ALL of said objects with one tick of a checkbox. 

Be aware though, objects that are grouped together will have alt text for the group as well as each individual object within that group. You will need to expand the group and select the objects within to remove the alt text from those objects. 

image9 Removing alt tags from multiple
How to remove alt text from multiple objects at one time in Articulate Storyline.

Overall, the major point I want to be sure gets across is that having a plan to update alt text from the beginning can save time and make your elearning experiences more accessible to all learners.


If you need some help putting together your next elearning project or just want to talk about accessibility and elearning, please feel free to reach out over the next week or two. We’d love to connect!

Articles Similar to 4 Tips for Creating More Accessible eLearning Courses in Storyline using Alt Text

Learning & Development
Brian Washburn

How “Mature” is Your Training Program?

How strategic is your training program? How outcome-oriented, governed or sustainable is it? In today’s podcast, Danielle Duran talks about how to objectively measure your training program in those four key areas.

Learning & Development
Brian Washburn

A Conversation on Inclusive Training Design with Jolene Jang

When I participated in a DEI-focused session led by Jolene Jang at a recent conference, I just kept shaking my head. She would point out specific ways to make learning more inclusive, and I immediately thought: there’s another thing I’m not doing!

Learning & Development
Brian Washburn

Where Sales Enablement Meets L&D

Natalie Mazzie, an experienced sales enablement professional, feels there is a lot that general L&D folks can learn from the sales enablement field. Here’s our conversation.

Maria Leggett on learning & development resumes
Learning & Development
Brian Washburn

A Learning & Development Resume that Gets Noticed

When you’re applying for an L&D job, how do you best position yourself to get a call from a recruiter or hiring manager? Experienced HR professional, Maria Leggett, offers her insights in today’s podcast.

Subscribe to Get Updates from Endurance Learning

Brian Washburn, Author

Brian Washburn
CEO & Chief Ideas Guy

Enter your information below and we’ll send you the latest updates from our blog. Thanks for following!

Find Your L&D Career Path

Explore the range of careers to understand what role might be a good fit for your L&D career.

Enter your email below and we’ll send you the PDF of the What’s Possible in L&D Worksheet.

What's possible in L&D

Let's Talk Training!

Brian Washburn

Brian Washburn
CEO & Chief Ideas Guy

Enter your information below and we’ll get back to you soon.

Download the Feedback Lesson Plan

Enter your email below and we’ll send you the lesson plan as a PDF.

feedback lesson plan
MS Word Job Aid Template

Download the Microsoft Word Job Aid Template

Enter your email below and we’ll send you the Word version of this template.

Download the Free Lesson Plan Template!

Enter your email below and we’ll send you a Word document that you can start using today!

free lesson plan template
training materials checklist

Download the Training Materials Checklist

Enter your email below and we’ll send you the PDF of the Training Materials Checklist.

Subscribe to Endurance Learning for updates

Get regular updates from the Endurance Learning team.