Writing Good Alt Text

We all know that adding alternative text to images is good for SEO because it helps Google know what those images are about. But alt text is about more than search engine optimization. Alt text on images is how people who are blind or visually impaired know what an image is conveying.

Note I did not write that alternative text is about describing how an image looks. This is one of the most common misconceptions about alt text.

In many instances, alt text does, indeed, describe how an image looks or what an image is, but in other cases, it is not helpful to have alt that visually describes the image.

Good alt text does not describe the image itself, but rather describes the image’s purpose on the page.

Examples of Good Alt Text

Good alt text should be accurate and succinct. Think tweet length or less. It’s important to remember the goal of alt text is to provide equivalent information to users who cannot see images, so you want to convey key details that a sighted person would receive from seeing the image.

Image Added to A Page

Imagine a photo of a dog playing fetch, used to illustrate a web page about a dog park. The purpose of the image is to make the park look enticing to potential visitors, showing happy dogs enjoying the park, and may also convey information about amenities available if someone visits the park.

Example alt text:

alt="A happy labrador retriever playing fetch in [dog park name]; in the background, are multiple shade trees, a water spigot, and short fencing."

Charts and Graphs

Complex charts and graphs can be hard to provide all of the information in alternative text. In that instance, you want to provide an alternative means of accessing the data (such as a table) near the image, and can use the alt text to communicate to the user where they might find the information.

For example, on a chart showing the follower growth of a company over the past year, you might write:

alt="A bar chart showing a 20% increase in followers from January to December of 2022. See table following image for all data points."

Headshots

When you have a collection of headshots, such as on a team page, the purpose of the images is to provide personality and make that group of people feel more “real” to the website visitor.

Don’t just write “Amber Hinds’ headshot.” Instead, you want to convey the same information that a sighted person might have. Include a description of age, race, gender, physical appearance, clothing, or other unique elements in the headshot.

This allows blind and visually impaired people access to the same information about diversity and personalities that a sighted person has.

Linked Images

This is one of the top mistakes we see on websites – describing what a linked image (such as a logo or an icon) looks like, rather than where it goes.

Images that are linked need alt text that succinctly describes where the link points because the alt text on the image will get read out as the text of the link by a screen reader.

For example, if you have a logo that is linked to your home page, the correct alt text would not be “Equalize Digital Logo” – rather, it would be:

alt=”Equalize Digital home page”

When Not to Use Alt Text

Sometimes the correct alt text is to have no alt text at all. If you have an image that is purely decorative and provides zero informational value to the user (such as a border or decorative accent), then it is correct for that image to have an empty alt attribute, like this:

<img src=”/border.png” alt=””>

Having an alt attribute that is empty will tell screen readers to ignore the image altogether. This helps users quickly get to the information they need without being distracted by clutter.

Many people ask – how do you decide if an image is “decorative”? Generally it’s safe to assume that an image is never decorative (there’s a reason why you have a person working on a laptop with that blog post and not a photo of toast on a plate, after all). If you need help deciding, W3 has an alt text decision tree that may be helpful.

More Alt Text Resources

If you want to learn more about writing good alt text, here are some additional resources:

• How to Write Meaningful Alt Text in the Accessibility Checker documentation
• The Alt Scene: When and How to Write Alternative Text: Meg Miller speaking at WordPress Accessibility Meetup
• Step-by-Step Instructions for Writing Alt Text from the University of South Carolina
• Alternative Text article on WebAIM