Alternative Text: Addressing the issues
Learn how to create alt text for images and make images accessible for all
Time estimate: 4 to 6 mins
Lesson contents:
Part 1 | Alternative Text: Understanding the issues
Part 2 | Alternative Text: Addressing the issues
This training helps:
Anyone who creates and manages images on documents or websites:
- Content writers
- Marketers
- Designers
- … and more
Review of “Understanding alternative text”
Alternative text
Alternative text otherwise known as alt text and text alternative provides a brief description of the image. The text information can be rendered visually, auditorily, tactilely, or any combination.
People who use screen readers, refreshable Braille displays, and other assistive technology rely on the description. Without alt text, people who can’t view the image will not have access to important information.
How does missing alternative text affect assistive technology users?
Screen readers and other assistive technologies read the alt text of an image out loud or provide it tactilely on a Braille device. This helps users understand the meaning of the image.
If there is no alt text, technology may try to fill the gap. In some cases, assistive technology reads the image’s file name. In other cases, an application or platform may automatically add alt text. This can provide wrong information about the image.
Check out the audio clips for examples of what a screen reader says when alt text is included and when it’s missing.
Image with alt text
In this example, the screen reader announces text from the web page. Then, it reads the alt text of an image.
“Check out our new line of dog harnesses that will have your pet going out in style! A Labrador Retriever sits in the sun wearing a bedazzled harness, image.”
Image without alt text
In this example, the screen reader announces the same text from the web page. Since this image doesn’t have an alt text, it announces the file name.
“Check out our new line of dog harnesses that will have your pet going out in style! IMG underscore six-thousand-five-hundred-forty-six PNG, Image.”
Not all images need alt text
When deciding whether to include alt text, ask: Does this image add meaning to the content?
If it doesn’t, then mark the image as decorative. This helps to avoid unneeded noise for assistive technology users and helps them navigate more efficiently.
Decorative images are mainly used for aesthetic purposes. Since they don’t convey essential information, people won’t miss anything if the image is not available.
Examples of decorative images
A zoo’s website banner image of a tiger could be decorative. It only adds tone, not content to the page.
The colorful border in a flyer is a visual decoration and doesn’t convey information. It can be decorative.
Deciding whether an image is decorative depends on context. In some scenarios, you might want to describe an image that sets the voice or tone of the content even if it isn’t informative. In other scenarios, describing an image might add extra noise for assistive technology users.
Consider what the intent of the image is and decide based on the context.
Write alternative text with 3 Cs
If the image has relevant information, add alternative text.
To improve the experience for assistive technology users, alt text should be clear, concise, and contextual to the story you’re telling. Instead of merely describing the image, focus on the key message or takeaway you want users to gain from it.
Make alt text clear with plain language
Use plain language, or language that’s appropriate for the audience. Don’t use jargon or abbreviations without spelling them out the first time they appear in the document or page.
Jargons and abbreviation
Start of hyperlink, RN monitoring HR, BP, SPO2 levels in ICU, end of hyperlink
Clear
Nurses check on patient’s heart rate, blood pressure, and oxygen levels in intensive care unit (ICU)
Keep alt text concise
Aim for 1–2 sentences, or up to around 150 characters, and put important information first. Don’t use line breaks or write long paragraphs. If descriptions are long, screen reader users will often skip the rest after the first sentence or two.
Overly long alt text
Start of hyperlink, A room with three people sitting at counters. The room is a laboratory and there is equipment on every surface including computers, microscopes, binders, and glassware. The people are scientists wearing white lab coats, latex gloves, and protective glasses., end of hyperlink
Concise, descriptive alt text
Scientists working in a crowded lab.
Avoid unneeded format information
Don’t include format information like “image of,” “photo of,” or “picture of.” Screen readers announce it is an image to users. One exception would be if the format is important to understanding the image, like if an artist needs to distinguish between a fine art photo they took and a photo of a painting they made.
Alt text that describes the format
Start of hyperlink, Photo of a mother and child checking expiration dates on bottles of milk in a grocery store., end of hyperlink
Alt text that only describes the content
A mother and child check expiration dates on bottles of milk in a grocery store.
Make descriptions contextual
The same image can be used to convey different purposes and alt text. A good description will convey information that makes sense in context.
For example, say you’re browsing a website that sells dog harnesses, and you encounter a photo of a dog wearing one of the harnesses for sale. In this context, you’d want to understand how the harness looks and fits the dog.
Dog harness site
Alt text that doesn’t match the context
Start of hyperlink, Bernie, a young, light golden-colored Labrador Retriever., end of hyperlink
Alt text that fits the context
Lightweight, black, bedazzled harness on a medium-sized dog.
Frequently asked questions
Can artificial intelligence (AI) help with alt text?
Some platforms, like Microsoft Word, offer AI-generated alt text. These descriptions are often inaccurate. For example, our company logo, “RaLytics,” was auto-generated as “a blue and white logo.”
Since AI cannot determine what’s contextually relevant or if it is decorative, this description lacks meaning. A more accurate alt text would be “RaLytics logo.”
How do you describe images based on a content’s branding, theme, or look and feel?
Ask how the image adds context to the theme. For example, a photo of a dark scene.
For a horror website, alt text could be “an eerie house lurking in the dark.
For a neighborhood watch page, alt text could be “dark neighborhood with low visibility.”
What if my team is okay without alt text?
You can’t always know what accommodations people need, or who will access your content. It’s a best practice to make content and documents as accessible as you can from the start. This saves valuable time that you might spend remaking content to be more accessible later.
Takeaways
When creating alt text, follow the 3 Cs: Clear, concise, and contextual. Clear text ensures assistive technology users understand the image, concise avoids unneeded details, and contextual ensures relevance to surrounding content. Good alt text enhances accessibility and provides a better experience for disabled users, people with a bad internet connection, or employees in a company with high security requirements.
Self reflective questions:
- Does this image add meaning to the content?
- Is the image description clear, concise, and contextual?
Practice exercises
1. Do all images used in digital content require alternative text?
- Yes
- No
The correct answer is no. Not all images require alternative text. Decorative images do not need alt text as they do not convey important information. This keeps the content concise and avoids unneeded descriptions.
2. Try writing the alt text based on the scenario for a photo
Scenario:
This is an image for a product photo in an online summer catalog.
Possible answer:
A small, detailed toy truck with a brown cab and an orange bed.
This alt text is clear in describing the object, concise in its wording, and contextual to the scenario of describing the catalog item.
You can check if your answer would work as alternative text by asking these questions:
- Does this image add meaning to the content?
- Is the image description clear, concise, and contextual?
3. Write the alt text based on the scenario for a screenshot
Scenario:
A screenshot of a pop-up window with an error message that you send to a colleague or the IT team when you are troubleshooting an issue.
Possible answer:
Screenshot of a pop-up window with an error message stating “Cannot delete the attachment.”
This alt text is clear in describing the error message, concise in its wording, and contextual to the scenario of documenting a file attachment error.
Ask these questions to check if your answer would work well as alternative text:
- Is the alt text clear enough to understand the image?
- Does the alt text have the needed information without being too detailed?
- Is the alt text relevant to the context of an attachment error?
Resources
Related standards:
Other resources (if applicable):
We’d love to hear from you.
Help improve our training and take our survey!
Explore our other training
Ambiguous links
Make link destinations clear for everyone
Missing document language
Ensure the right language is set to properly interpret the content