Alternative Text: Understanding the issues
Understand how to include alternative text to make images more accessible for all
Length Estimate: 3 to 5 mins
Lesson contents
Part 1 | Alternative Text: Understanding the issues
This training is good for:
Anyone who creates and manages images on documents or websites.
- Content writers
- Marketers
- Designers
- & more
Types of image descriptions
Image descriptions explain visual content and meaning. This benefits everyone.
Types of image descriptions:
Alternative text: Short descriptions used by screen reader users. It’s hidden from anyone not using a screen reader, braille device, or similar technology.
Captions: Visible explanations next to an image to add more context.
Long descriptions: Detailed explanations of complex images like infographics. They provide more information for all users.
Text alternatives
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 who use screen readers, refreshable Braille displays, and other assistive technology. Without alt text, the user will not have access to important information.
Missing alt text is like gaps in a story!
Imagine reading an exciting comic book, only to find key pages missing!
You can guess what happened, but you’re missing important details. You might have to search for another copy or look it up.
Without all the pages, you can’t enjoy and understand the story the same way everyone else can.
For people who rely on screen readers and other assistive devices, missing alt text feels similar in digital experiences.
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.”
Alt text is a good backup
Besides helping people with disabilities, alt text can help other users, too. If you have a bad internet connection or block images for security reasons, alt text will appear instead of the image.
For example, you work for Your Company, and they have increased security on all communications. You get an email from someone outside the company that includes your logo image. The security policy prevents the image from showing.
How alt text may show up in your email
Logo with alt text:
Since the image came with alt text, sighted users will see a broken image with the alt text written: “Your Company Logo.”
Logo without alt text:
Since the image did not have alt text, sighted users will see a broken image with a file name like “Untitled.jpg.”
How common is this missing alt text problem?
54.5%
Missing alternative text errors affected 54.5% of out of 1 million tested home pages in the 2024 WebAIM Study.
This shows just how common this painful experience is for everyone, especially for people with vision disabilities. Luckily, we can improve this with tips in Part 2: Addressing Alternative Text.
How can Alternative Text matter to you or someone you know?
Please reflect on which scenarios apply to you or someone you know:
- I/they use a screen reader to understand information in images
- Some images in my/their email doesn’t show up because of security
- I/they travel or hike and don’t have a good internet connection to load images
- I/they live in an area with inconsistent internet connection
- I/they use a search engine that matches results using alt text (e.g. Google, SharePoint, etc.)
- Other
- I/they don’t need Alt Text
Takeaways
Alternative text can help people who use assistive technology understand visual information and make sure everyone can access all parts of a story.
Want to learn how to address alt text?
There is no single way to tackle alternate text. The same image can have different alt text depending on the scenario and context.
In Alternate Text: Addressing the issues, you get quick examples and tips to clarify with real-world cases. It will take 4 to 6 minutes.
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!