Image Alt Text: What It Is and Why It Matters for Accessibility

Alt text is a written description of an image that screen readers can read out loud — or convert to Braille — for people with visual impairments, sensory processing disorders, or learning disorders.

Done right, alt text can paint a complete picture of a website for people who cannot perceive images visually.

Unfortunately, many designers and content creators forget to provide alt text. Or they write something so non-descriptive — like an image of a menu that is simply labeled “menu” — it might as well not be there.

Although alt text is often confused with captions, there are distinct differences between the two. Alt text is typically invisible to sighted users, while captions are displayed directly in the web browser. Captions can also include additional details about an image, such as photo credits or copyright information. 

When Should I Use Alt Text?

According to the World Wide Web Consortium (W3C), all images must have a text alternative that describes its function or the information it represents. However, that doesn’t mean every image should be treated the same.

Here’s a quick overview of the different types of images — and how to write alt text for each one:

• Informative images: If a picture, photo, or illustration is intended to visually represent an important concept or information, the text alternative should be a short description conveying the essential information presented by the image.
• Decorative images: If an image’s only purpose is to add visual decoration (rather than convey information that is important to understanding the page), adding a null (empty) text alternative (alt=”“) tells assistive technologies like screen readers to ignore, or not announce, the image.
• Functional images: If an image is used as a link or button (such as a printer icon to represent the print function), the text alternative should describe the functionality of the link or button, rather than the visual image.
• Images of text: If readable text is presented within an image, the text alternative should contain the same words as the image.
• Complex images: To convey data or detailed information (such as a graph or diagram), the text alternative should be a complete text equivalent of the data or information provided in the image.

Not sure how to treat a specific image? The W3C has developed an alt text decision tree to help you determine the right approach depending on the image’s purpose.

How Do I Know if an Image Is Decorative?

Descriptive alt text might be one of the keys to delivering an optimal experience for people with visual impairments, but sometimes deciding what to leave out is just as important as what to include.

There’s quite a bit of subjectivity when it comes to deciding if an image is decorative or informative. As a general rule, images may be decorative when they are:

• Visual styling, such as borders, spacers, or corners.
• Illustrative of adjacent text, but not contributing any additional information.
• Identified and described by surrounding text.

Can’t decide if an image is decorative? The W3C’s Web Accessibility Initiative (WAI) recommends pretending to read your web page out loud to someone over the phone. If the image doesn’t contain any information and isn’t a link or button, you can treat it as decorative.

Pro tip: If you use a null (empty) text alternative (alt=””) to hide decorative images, make sure not to include a space between the quotes. If a space is present, the image may not be effectively hidden from assistive technologies. For example, some screen readers will announce an image if a space is present.

Four Tips for Writing Better Alt Text

1. Don’t Start With “Image of” or “Picture of”

It might seem like a helpful cue, but remember not to include phrases like “picture of” or “image of” in your alt text. Screen readers will know from the preceding HTML tag to announce the alt text as an image — so including these phrases in the alt text will only disrupt the user experience and waste valuable characters that could be used to describe the image.

Pro tip: In some cases, it may be necessary to declare if something is a painting, a photograph, or an illustration, but in general it’s best to avoid the more generic use of the terms, i.e., image or picture.

2. Be Descriptive

People using screen readers can ignore what you write, but they can’t ignore what isn’t there. For that reason, it’s important to be as descriptive as possible — while still paying close attention to the context and setting of the image.

For example, the phrase “golden retriever puppies” is an okay description for a photo on the homepage of a veterinarian’s website, but adding details can provide valuable context. If the page lists specific services for dog owners, a better use of alt text might be “Golden retriever puppies getting their first vaccinations.”

3. Lead With the Most Important Information

The same rules that apply to news articles and novels apply to alt text: Don’t bury the lede, and have a strong hook. Try to put the most important information about an image at the beginning, so people aren’t left wondering why you’re describing every minute detail of an image.

4. Write for People, Not Search Engines

Many developers make the mistake of trying to stuff keywords into their site's alt text, like it's some sort of secret element that will fool search engines.

Here’s the problem: You can actually harm your website’s SEO efforts by stuffing keywords into alt text. Even worse, the people who actually rely on alt text to understand a page will certainly take notice.

If you can naturally fold a keyword into your alt text, great. But don’t fall into the trap of treating alt text like an SEO tool.

Take the Next Steps Toward Accessibility

Want to increase your knowledge of accessible design and make sure that everyone can enjoy your website, images and all? Check out our Comprehensive Guide on Accessible Web Design.