Alternative Text: Addressing the issues
Learn how to create alt text for images and make images accessible for all
Length Estimate: 4 to 6 mins
Lesson contents
Part 1 | Alternative Text: Understanding the issues
Part 2 | Alternative Text: Addressing the issues
This training is good for:
Anyone who creates and manages images on documents or websites:
- Content writers
- Marketers
- Designers
- … and more
Review of Understanding alternative text
What is alternative text?
Text alternatives otherwise known as alternative text and alt text is a brief description of the non-text images to provide text information. The text information can be rendered visually, auditorily, tactilely, or any combination.
They’re mainly used by people with who use screen readers, refreshable Braille displays, and other assistive technology. Without alt text, the user will not have access to important information.
People miss the story without alt text
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.
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.”
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.
There’s no right or wrong way to handle decorative images.
Depending on the scenario, 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.
General principle: 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.
Examples of alternative text
The same image can be used to convey different purposes and alt text.
Pet shelter
Scenario: You’re browsing a pet shelter website to adopt a large dog
Needs improvement
Alt text: “A golden retriever sitting on back legs in what appears to be a park wearing a harness at around sunset.”
Improved
Alt text: ”Bernie, a young, light golden-colored Labrador Retriever.”
Dog harness site
Scenario: You’re shopping for a harness for your service dog on a website.
Needs improvement
Alt text: “Black, thin, medium-sized harness on an adult large golden retriever sitting on the grass in a park”
Improved
Alt text: ”Black, thin, medium-sized, and bedazzled harness on a large dog”
General do’s and don’ts
Do
- Keep it concise
- Aim for 1 to 2 sentences or up to 150 characters
- Put important content first
- Use plain text
- Convey the purpose of the image based on the context
Don’t
- Include “image of…,” “logo of…,” or ”picture of”
- Use jargon and abbreviations without spelling them out the first time they appear in the document.
- Include line breaks
- Write long paragraphs
Commonly 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?
Expand ‘Show answer for question 1’ below when you’re ready.
Which answer would you choose below?
- 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
Context: This is an image for a product photo in an online Summer catalog.
Consider the 3 C’s when thinking about how you might make the alt text for this image. Expand ‘Show answer for question 2’ below when you’re ready.
Example 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.
Clarifying questions:
- Does this image add meaning to the content?
- Is the image description clear, concise, and contextual?
Different context:
A photo in a list about what types of toys are appropriate for children of different ages.
Different context, different alt text:
Toy dump truck with a brown cab and an orange bed made of durable safe plastic material.
How do you feel about the alt text you thought about?
3. Write the alt text based on the scenario for a screenshot
Context: 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.
Consider the 3 C’s when thinking about how you might make the alt text for this image. Expand ‘Show answer for question 3’ below when you’re ready.
Example 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.
Clarifying questions:
- Is the alt text clear enough for someone who doesn’t see the image to understand the issue?
- Does the alt text include all needed information without being overly detailed?
- Is the alt text relevant to the context of documenting an attachment error?
How do you feel about the alt text you thought about?
Resources
Online content:
Related assistive technology:
Related standards:
We’d love to hear from you.
Help improve our training and take our survey!
Explore our other trainings
Ambiguous links
Make link destinations clear for everyone
Missing document language
Ensure the right language is set to properly interpret the content.
Coming soon!