Images and Alt Text

What is 'alt text'? 

Alternative text (or ‘alt text’) is a text representation of an image. Alt text describes the content of the image. If an image provides meaning to your webpage, document, or social media post, you will most likely need to add alt text.

Why is alt text important? 

Alt text allows anyone who can’t view or access an image know what is going on in the picture. 

Without alt text, folks who are using screen readers, folks with bad internet connection, and folks with low vision will miss out on important information and context that is included in photos.  

What are the requirements for alt text?

Alt text can be subjective. There may not be one ‘right’ way to write alt text. 

• You must add accurate, descriptive alt text for any image that provides meaning. If an image is meaningful, it needs alt text. This alt text must tell users what is happening in the image and its purpose in your content.  
• All of the text in your image must be added to your alt text. Text in images can’t be accessed by assistive technology, so you must provide a different way to provide this information. 
• Linked images must have alt text that describes the link destination, not the image content. You need to let users know what will happen when they select, or ‘click, an image. Learn more about accessible links. 
• You must review all AI generated alt text, if applicable. Human judgement is crucial, and AI makes mistakes. Learn more about AI Guidelines for Communicators. 

Alt text best practices 

• Keep your alt text brief. Around 150 characters, or 1-2 sentences, is a good baseline. If you need more space to all of the information in your image, consider adding a long image description.
• Avoid starting your alt text with ‘image of’ or ‘picture of’. Screen readers already announce this information.
• Avoid redundancy. If an image caption under a photo says 'George Washington', don’t also include alt text that says 'George Washington'. If you use an image caption, your alt text should be different.

The art of alt text

Consider the context when you write alt text. Here are three ways to write alt text for the same image used for different content:

• A large, almost empty stadium. (A story about sports being canceled during COVID)
• Large stadium with cracked pillars. (A story about an earthquake retrofitting project)
• A man sprints up the stairs of a stadium on a sunny day. (A story about exercising outdoors)

Alt text examples

How can I test my alt text?

All important images are required to have accurate alt text. As a reminder, automatic testers can only tell if an image has alt text or not, but can’t tell if the alt text is correct. This requires a human review.

How to test alt text. 

1. Run the WAVE tool or the Image Alt Text Viewer extension to find all images with alt text. Both tools will let you know if there is an image without alt text, or if an image with alt text might have an accessibility issue.
2. Confirm that all images have correct, accurate alt text. 

Most common issues for alt text. 

• Alt text is too long. Aim for about 150 characters. If you need more room to describe your image, add this information directly to your webpage. This is a common practice for charts and graphs.
• Alt text is missing. All important images should have descriptive alt text.
• Alt text is a file name. This sometimes happens if alt text was never added to an image.
• Linked images describe image content, and not link destination. If you have an image that is also a link, the alt text should describe the destination of the link, not the image itself.

Easiest way to fix these issues. 

Update the alt text for your images to make sure they are accurate and follow alt text best practices.

More resources

• Alt text decision tree - W3C
• Alternative text - WebAIM 
• Add alt text in Open Berkeley - Open Berkeley