A picture is worth a thousand words

Cormac Chisholm(opens in a new Tab)

Aug 1st, 2022

·

3 min read

Remember the old adage, “a picture is worth a thousand words”? Well, there’s an added truth to that in the context of accessibility. Images convey information and meaning; when we add one to our product, we should provide at least a short description conveying any of the essential information presented by the image.

Last week we mentioned the WebAim Million report, which identified the top six most common WCAG (Web Content Accessibility Guidelines) compliance failures. Today’s lesson is going to cover the second most common failure: Missing alternative text for ImagesThis link opens in a new tab.

WCAG Success Criterion 1.1.1 Non-text contentThis link opens in a new tab requires images to have text alternatives that describe the information or function represented by them. This ensures that images can be used by people with various requirements.

Here are some best practices for adding alt text to images:

• Determine whether the image should have alt text. While you should add alt text to most images, there are exceptions. When an image is purely decorative or is described in text nearby, you should provide an empty alt attribute. For further reading, W3C has created a nice decision tree you can follow to determine when to use alt text.
• Don’t start alt text with “Image of…” or “Picture of”. Most screen-reading tools will identify an image from the article's HTML source code, and announce it. So adding by adding “Image of…” as alt text, might get announced as “Image. Image of…“. It’s best just to get right to the description.
• Keep your alt text fewer than 125 characters. Screen readers typically stop reading alt text beyond this point, cutting off long-winded alt text. For consistency it’s better to keep these descriptions short and descriptive.
• Describe the image, and be specific. Think about the image’s subject matter and how it relates to the context of the site or article.
• Add context that relates to the topic of discussion. If the image doesn’t feature a recognizable place or person, then add context based on the content of the page. For instance, If I was to add a stock image for this post of a person typing on a computer, I might write “Woman adding alt text to images for her website”.

I hope those tips help. Next week we’ll continue our lessons with some other common accessibility gotchas.

But before we finish this week’s lesson, I wanted to share a particularly powerful image I came across last week. Below is a picture of Greek Paralympic swimmer, Antonios Tsapatakis. The photo shows him standing in front of his wheelchair underwater in the pool.

It serves as a powerful reminder that the environment we’re in affects what we’re capable of. When you develop for accessibility, you create an environment that can foster inclusion and empower others, where they may have been excluded before.