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

Task prompt

Get an idea of the style of this store’s products from the image alt text on the page.

Results description

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.

Tester featured

Chris

Broken elements

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=“”).

Working elements

Good alt text descriptions help a screen reader user understand the style and context of images on a webpage. 

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.

1. 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. 
2. Be descriptive, but make sure the content reflects the context and purpose of the image on the page. Those details add significance. 
3. Don’t cram in SEO keywords. Focus on providing useful information and creating a good user experience.
4. Try to limit alt text to 150 characters. Some screen readers will cut off once that limit is reached.
5. 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.
6. Don’t use filenames as alt text. 
7. 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.