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

collapse all expand all

Decorative images 

A decorative image is an image that does not provide meaning. Decorative images are added to improve the visual layout of your content, but are not needed to understand the meaning of your content. 

Decorative images should not have alt text added. 

You will need to either: 

  • Add ‘null alt text’ to your image. (alt="") or, 

  • Mark your image as ‘decorative’ 

Note: Different content management systems and software have different methods of declaring decorative images. 

If it is not possible to add null alt text to your image or mark your image as decorative, we recommend keeping your alt text very brief.

Charts, graphs, and complex images

Learn more about making accessible charts and graphs. 

Charts and graphs should have both captions and alt text.

The alt text should convey an overview of the information contained in the graph. 

Image captions for graphs can be longer and might describe important data trends. This is helpful both for blind users as well as the many users who struggle to understand infographics.

Images with text 

Avoid using images of text. Images of text can't be read by a computer, so it makes it more difficult for folks to access the information. 

If you do provide images of text, make sure to include all of the text that is in the image in your alt text. If there is more than two sentences, consider providing a long text description instead. 

Logos

This is the one exception – logo images that contain organization names are okay. Just use the name in your alt text (not "logo of")-- it is understood that an organization name in alt text for an image near the top of content is a logo.

Headshots 

There are multiple 'right' ways to add alt text to professional headshot portraits. 

  • If there is no image caption, use alt text: "Jane Smith,"  "Headshot of Gerardo Diaz," or similar.
  • If the person's name, Leilani Kekoa, is in the image caption, use a null alt text tag if possible. The reason is that otherwise, a screen reader will read the name twice. If it's not possible to use a null alt text tag, use "portrait of Leilani Kekoa" or "headshot of Leilani Kekoa." 
  • If a nearby heading or text contains the person's name, but there is no image caption, include alt text. The reason is that the text is not programmatically attached to the image.

If a person's photo includes unique positioning, facial expression, attire, and/or a backdrop that conveys additional meaning or tells a story, then this information should be included in the alt text. Examples of possible alt text:

  • Ballet instructor, Vonda Jackson, wearing a pink leotard and toe shoes, with arms outstretched in front of a ballet studio mirror.
  • Agriculture professor, Ajay Bakshi, wearing a bee suit and standing next to a blooming fruit tree, with numerous bees flying around.
  • James Babinski, holding a large camera to his face, is concentrating on photographing a plant at the botanical garden.

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

Dig into WCAG 

Here is additional information about WCAG 2.1 AA Success Criterion related to alt text. 

Images and Accessibility