Writing alternative text (alt text) for eLearning, online courses, and digital training materials can be frustrating when you’re unsure what belongs in the description. One reason is that many learning designers are unfamiliar with the image categories recommended in accessibility guidelines. These categories provide a practical framework for understanding the purpose of an image.
Once you identify an image’s category, writing effective alt text becomes much simpler. The categories help you determine which details to describe and which to leave out. You can then tailor the description to the image’s role in the learning experience.
Why Use Alternative Text?
The primary purpose of alt text is to convey an image’s meaning to someone who cannot see it, whether due to blindness or low vision, or when the image cannot be displayed. Screen readers and other assistive technologies read alt text aloud, making the image’s meaning accessible.
Well-written alt text expands the range of people who can benefit from a learning experience. It provides an equivalent alternative for those who cannot perceive it.
Writing Image Descriptions for Instructional Purposes
On many websites, alt text primarily helps users understand the content of an image and identify interactive elements for navigation. In instructional materials, alt text should focus on the image’s instructional purpose—what learners need to understand, notice, or do because of the image.
Before writing alt text, always ask: How does this image support the learning objective?
For example, two images that look similar visually may require very different alt text depending on the learning goal. On a hospital website, the description of a stock photo showing a nurse smiling at a pediatric patient might be “Nurse smiling at young patient.”
In a healthcare training course on bedside communication, however, the alt text may read, “Nurse maintaining eye contact while describing a procedure to a young patient.” The second version conveys the behavior being modeled, which is instructionally relevant.
Effective alt text for learning considers the image’s context and its contribution to the learning outcome. The image category determines the description that accessibility guidelines recommend.
Categories of Images
The Web Content Accessibility Guidelines (WCAG) identify image categories based on purpose, each with different alt text requirements. These five categories are most relevant to instructional design work: informative, decorative, functional, images of text, and complex. WCAG identifies additional image categories, such as groups of images and image maps, which are uncommon in most instructional materials.
You’ll need a different text alternative for each category. The following sections explain the type of alt text to write, along with an example of each category.
Informative Images
These images contribute to the meaning of a web page or learning experience. They graphically represent concepts and information. The text alternative should include a short description that conveys the image’s essential information required for learning.
Example alt text for the image below: A person pours motor oil into a funnel leading to a car’s oil reservoir.
Decorative Images
Decorative images enhance the visual appeal of a slide or page but don’t convey meaning to the learning experience. In this case, you’ll want to instruct screen readers to ignore the image. Otherwise, the screen reader may read the image file name aloud, creating unnecessary auditory clutter.
Use what is known as null alt text, which consists of two quote marks with no space in between (alt=””). This is a signal for the screen reader to skip over the image. Many authoring tools provide a decorative option that automatically handles this. If your tool does not, follow the tool’s guidance for creating null alt text.
Alt text for the image below: alt text=””
Functional Images
Functional images are interactive elements, such as buttons and links, that initiate actions. The guidelines say to write a text alternative that describes the functionality of the link or button rather than a description of the image.
However, if you use relevant pictures for buttons and links in eLearning and the images contribute to the learning activity, I think it’s necessary to include a brief description in addition to the action description. For this example, the image is a clickable button.
Alt text: Mia, with her arms crossed, appears resistant. Click on Mia to respond to her objections.
Images of Text
Readable text created in a graphic program is known as embedded text or an image of text in accessibility guidelines. You’ll need to provide the same words in the text alternative, as screen readers cannot read embedded text. Avoid text in your graphics whenever possible; instead, create text with the authoring or presentation tool, or HTML for a web page.
Alt text for the image below: Sticky note with security tip: don’t click on links in your email.
Complex Images
Complex images contain substantial information, such as graphs, diagrams, maps, and screenshots. WCAG guidelines require a two-part text alternative—a short description and a longer text equivalent.
Write a short description of the image and the location of the long description, where appropriate. In the long description, provide a text version of the essential information conveyed by the image. Provide an equivalent experience for those who cannot see the image.
Alt text for the image below: Bar chart comparing average college costs in the United States by institution type for two academic years. The long description follows.
Long Description: The chart compares the average annual cost of attending three types of U.S. colleges and universities over two academic years, 2013–14 and 2023–24.
Costs increased for public institutions from approximately $9,000 to $10,000 per year. Private nonprofit institutions had the highest costs in both years, increasing from approximately $34,000 to $39,000 per year.
Private for-profit institutions showed little change, decreasing slightly from approximately $19,000 to $18,000 per year. Among the three categories, private nonprofit institutions were the most expensive in both years, while public institutions were the least expensive. The largest increase occurred among private nonprofit institutions.
Questions to Consider Before Writing Alt Text
Use this two-step approach when you are learning to write alt text.
Step 1: What type of image is this?
Is the image decorative, informational, functional, graphic text, or complex? Use this to determine the required text alternative.
Step 2. Determine what information needs to be conveyed.
Consider what a learner who cannot perceive the image needs to know:
- What would the learner miss if the image were skipped?
- Does the image itself constitute learning content?
- Does the learner need a description, interpretation, or analysis?
- Will learners be tested on what the image shows?
If learners will be assessed on information in the image, avoid giving the answer away in the text alternative. Describe only what is necessary to fairly access the assessment.
Final Tips for Writing Alt Text
When writing alt text, focus on the information learners need rather than a detailed visual description. The following practices can improve clarity and usability:
- Avoid starting with “image of,” “photo of,” or “graphic showing.” Screen readers typically announce the presence of an image. On the other hand, “bar chart of” or “diagram of” is appropriate.
- Write in plain language at the same reading level as the course content.
- Keep descriptions concise. Most informative images can be described in one or two short sentences.
- Describe the image in its context. Focus on information relevant to the learning objective.
- Use punctuation as it helps screen readers determine pauses and phrasing.
- Avoid repeating information already provided in nearby text.
If you use AI tools to generate alt text, review the output from an instructional design perspective. Revise it if it does not convey the information appropriate for those who rely on screen readers.
In many learning experiences, some images do not fit neatly into a single category and require additional judgment. I’ll discuss these considerations in a follow-up article.
Alt Text and Accessibility Resources
- W3C Images Tutorial
- Good Alt Text, Bad Alt Text-Making Your Content Perceivable
- How to Begin Your Journey of Designing for All Learners (Podcast Episode with Sarah Mericer)
- Design for All Learners: Create Accessible and Inclusive Learning Experiences by Sarah Mercier (Editor)
One of the most effective uses of LLM is in generating Alt text; both Gemini and Co-Pilot are more than useful enough for most images, especially diagrams.
Hi Andrew,
I agree AI can really help with this. However, it can also get things wrong because the AI may not know the instructional message embedded in the image or which category the image fits into. That’s why it’s important to know the categories, the requirements of the category, and to understand how screen readers work. Thanks as always for your comment.
Connie
Connie, this is the most useful instruction about using alt text I’ve ever seen. Thank you!
Thanks so much, Kitty. You know, it’s not hidden information but I suspected not everyone was aware of it, plus we have to interpret it for learning purposes. Glad you found it helpful!!
Connie
“See” should not be used in the alt-text. Referecing the sentence “See the long description below the image.”
Great point, Krishna. Although you will the word “see” in instructions for writing alt-text, I agree that it’s best to avoid vision-dependent directions. I’ll change it to “Long description follows.”