Making Accessibility Visible Part 3: Image Alt Text
In the third installment of the Making Accessibility Visible video series, Chris, an Internet Security Professional who relies on a screen reader to browse the internet, tests image text descriptions, or alt text, on a shopping site. As Chris navigates both accessible and inaccessible versions of the same site, he discusses best practices and shows examples of poorly written alt text.
Watch the video to understand why properly written alt text is so important in making your site accessible for people who use screen readers.
Uncover instances of missing alt text on your website by checking for accessibility errors.
Code/technical notes from the video
Get an idea of the style of this store’s products from the image alt text on the page.
Good image alt text allows screen reader users to understand the style of what is on the page. Bad image alt text doesn’t add any value to the user experience.
Poorly written alt text doesn’t provide any useful information. In this instance, it’s better to hide decorative elements by providing empty alt text (alt=“”).
<img src="../assets/inspo1.jpg" alt="photo of styled room">
<img src="../assets/inspo2.jpg" alt="girl and dog picture">
<img src="../assets/inspo3.jpg" alt="green chair">
Good alt text descriptions help a screen reader user understand the style and context of images on a webpage.
<img src="../assets/inspo1.jpg" alt="white triangular pendants blend against white wall where burnt orange raw silk cushions rest beneath the Iris mirror, its gold frame shaped like the eye, radiating eyelashes.">
<img src="../assets/inspo2.jpg" alt="set in a sunny room is our Aames chair and ottoman – our nod to the legendary Eames. Shown here in creamy linen">
<img src="../assets/inspo3.jpg" alt="our corner chair covered in seafoam green cotton is stacked with comfy butter yellow velvet cushions next to the bestie dog bed in ivory">
What is Image Alt Text?
Image alternative text, also called alt text or alt tags, is a written description of an image that screen-reading tools can read out loud to people with visual impairments, sensory processing disorders, or learning disabilities. Well-written alt text doesn’t just describe an image, but also communicates its purpose and context to provide an accessible and functional user experience to people using screen readers.
Here are a few best practices to help you write meaningful and useful alt text.
- Don’t use “image of” or “picture of.” These words are redundant, since a screen reader already recognizes the alt text HTML tag and will announce it.
- Be descriptive, but make sure the content reflects the context and purpose of the image on the page. Those details add significance.
- Don’t cram in SEO keywords. Focus on providing useful information and creating a good user experience.
- Try to limit alt text to 150 characters. Some screen readers will cut off once that limit is reached.
- Don’t add alt text to decorative images — such as page dividers or branded graphics — as they don’t contribute to a greater understanding of the content. Use the empty alt tag (alt=“”) to hide decorative images from a screen reader.
- Don’t use filenames as alt text.
- Avoid repeating information that’s already covered in a caption or an adjacent header.
For more information and tips on how to add alt text to your images, check out the resources below.
Image Alt Text Resources
- An alt Decision Tree
This decision tree from W3C walks through the steps for determining if alt text is needed.
- Alternative Text
Learn more about alt text with this in-depth article from WebAIM. Contains many useful examples.
- What is Image Alt Text, and Why Does it Matter for Accessibility?
This entry from our blog covers why alt text matters for your website and how it impacts accessibility.
Ask a tester:
What’s one thing that is often misunderstood by people who don’t use screen readers?
“When you’re using a screen reader, you’re operating in a very linear way: you’re listening to a particular stream of text… I suspect that is a lot different than how someone gets that information and processes it visually. The things that might call out to you visually, probably won’t call out to you when using a screen reader.”
- Chris, blind since birth and relies on a screen reader to manage daily tasks and work, he primarily uses JAWS
Ready to test your website for accessibility?
Scan your site now.