Alt text is descriptive text that you—as a course author—can add to on-screen imagery to explain its content and purpose. Including alt text in your e-learning courses is important for a few reasons:
- To ensure all learners can access all your course content. Alt text helps learners using a screen reader—like those with visual or cognitive disabilities—understand the content and purpose of visual media.
- For compliance. It’s required by criterion 1.1.1 of the Web Content Accessibility Guidelines (WCAG), so if your courses need to be accessible, you have to include alt text.
- In case an image doesn’t load. If your learner runs into loading issues, the alt text will appear in place of the image, ensuring they can still understand the content.
For alt text to be effective, it needs to include the right information. But depending on the type of image, the “right” information differs slightly. Let’s take a look at some best practices for handling the most common image types in e-learning.
1. Decorative Images
Decorative images—like dividers, borders, or background images—don’t add any relevant information to your content. They’re simply there for visual interest. To determine if an image is decorative, ask yourself if removing it would impact the learning experience. If not, it’s decorative.
If that’s the case, it’s best to tell screen readers to ignore it. This saves learners using a screen reader time by letting them skip right to essential content.
For example, the photograph in the image below is purely decorative. It’s not adding anything to the learning experience, it just makes the slide more visually appealing. That’s why we’ve told the screen readers to skip over the image by putting "" in the alt text field.
|
Alt text:
|
To learn more about alt text for decorative images, read this article: Decorative Images.
2. Functional Images
Functional images—like those used as buttons or links—serve a specific purpose. When a learner interacts with these images, something happens. For example, they’re brought to another part of the course, a browser window opens and loads a specific site, or a file is downloaded.
When it comes to functional images, your alt text should describe exactly what happens when they interact with that image, so there are no surprises.
For example, if there’s an icon learners can click on to download a PDF, the alt text should include the action (download), the name of the document, and the file type—like in the example below.
|
Alt text: Download Driving Your Career Worksheet PDF |
To dig into the details of alt text for functional images, head over here: Functional Images.
3. Informative Images
Informative images not only add visual interest, they also provide additional context or information. Informative images can be either simple or complex. Let’s take a look at the difference between the two.
Simple
Simple informative images are illustrations, photographs, or diagrams whose content and purpose you can explain in a sentence or two.
For example, the alt text for the illustration below includes not only the visual description but also the meaning of the road sign that’s pictured.
|
Alt text: A road sign that’s round, blue, and has an arrow pointing to the right indicating that you must turn right. |
Complex
Complex informative images are anything with content or purpose that’s too involved to explain in one or two sentences. This could include charts, graphs, screenshots, etc. Because alt text is meant to be concise, it’s best to include the explanations for these kinds of images in the course text directly, instead of in the alt text.
For example, to understand everything that’s pictured in the graph below, a longer explanation is required, so the alt text gives a brief overview of what’s pictured and tells the learner to keep reading for more information.
|
Alt text: Graph showing accounts receivable data from January to June. Keep reading for more details. |
For more details on how to handle alt text for informative images, check out this article: Informative Images.
4. Logos
Logos are another type of image that doesn’t fit squarely into any of the above categories. That’s because they’re somewhat decorative, somewhat informative, and sometimes even functional. For that reason, we decided they deserved their own category.
When it comes to alt text for logos, it’ll depend on whether the logo includes a link.
With a link
When a logo is functional—meaning it links to a website—you’ll want to include both the name of the organization and information about where the link leads. For example:
|
Alt text: Alpha Airlines - home page |
Without a link
If the logo doesn’t link off to anything, you can simply include the organization’s name and the word “logo” the first time it appears. For subsequent instances of the logo, it’s best to have the screen reader skip over it to avoid repetition.
First instance:
|
Alt text: Alpha Airlines logo |
Subsequent instances:
|
Alt text:
|
Wrap-Up
By applying these practical tips, you can be confident you’re writing alt text that’s actually helpful to your learners and therefore creating a better learning experience for everyone.
Looking for more accessibility best practices? Check out this helpful series of articles: All About Accessibility.
And remember to subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and Twitter. And if you have questions, please share them in the comments.
Published 2 years ago
Version 1.0
