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.
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
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.
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.
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.
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.
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).
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)
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.
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!
