Alternative Text (alt text)

Alternative text describes the appearance or function of an image on a page. Alt text is read aloud to people using screen readers, providing essential context. The most typical method of providing alt text is with the alt attribute on an img tag:

<img
    src="the-big-one.jpg"
    alt="A huge pepperoni pizza"
/>

It’s alt text, not alt tags!

It’s important to get the right terminology. Alt text is employed with the alt attribute on an HTML image tag.

Alt text also displays in place of an image if it fails to load and is indexed by search engine bots to better understand the content of your page. Googlebot is like the world’s largest blind user!

Common use and risks of not including alt text

Without alternative text, your images will have no context to people who can’t see. The src attribute will be read instead, which can be a uniquely terrible experience with many build systems, where cached filenames or data-URI values would be read aloud:

Data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABA.....

Icons and emojis are both types of graphical content that need text alternatives. There are specific requirements depending on how the icons are used: within links or buttons, within bodies of text, or if they’re decorative. More info from Suzanne Aitchison: https://www.upyoura11y.com/images-icons-and-emojis/ (opens in a new tab)

It’s also important for user-generated content (like CMS content or social media) to include text alternatives. At scale, automated alt text with the option to override it has become common: Facebook and Twitter both have technology in place for this (see more info below). There is some risk that users won’t know what alt text is for, or they’ll misuse/abuse it. But anyone in charge of content in a CMS should be aware of the requirements for alternative text.

Skipping over images with empty alt=""

Some images are decorative (opens in a new tab) and provide no real content on a page. To mark an image as decorative and have it skipped over by a screen reader, you can provide an empty alt attribute:

<img src="decorative-border.png" alt="" />

W3C Alt-decision tree

It can be challenging to decide whether an image is decorative, or how to effectively describe it in alternative text. One of my favorite resources that could come in handy is the W3C’s Alt Decision tree:

https://www.w3.org/WAI/tutorials/images/decision-tree/ (opens in a new tab)

Alt text for background images

Sometimes graphic content is supplied through a CSS background image rather than an HTML image tag. It could be for scalable images in responsive design, infographics with a ton of content in them, or some other purpose.

Here is a code example (opens in a new tab) of how I would supply a text alternative to a CSS background image. I used a similar technique for financial data in one of Target’s Annual Reports:

APIs or tools for generating alt text

You might wonder, is there a way to provide automatic alt text like Facebook or Twitter? There are tools developing for this using computer vision and AI, but they haven’t historically been accurate (yet). Still, a quick search yielded a few results in 2023:

You should consider whether you really need an AI tool for your project, though. There is a significant trade-off with quality and user experience with auto-generated captions. Compare these two texts:

Image may include: adult female with child, outdor scene.

Versus:

A woman carries her young daughter on a colorful, autumn walking trail at golden hour.

Which one would you prefer to read?

How to Enable Screen Readers Other Assistive Technologies