Images and Alt Text

illustration of 3 people with a shared speech bubble

Creating Accessible Images

Images are great to help convey meaning in a quick way. However, when a user cannot view an image clearly that image can become a liability to a website's overall clarity and ease of communication. Fortunately, including well-crafted alt tags can fix this, but there is a bit of an art to writing clear, concise alt tags. 

How to Get Started

Provide useful alt text descriptions

  • When writing your alt text, be concise and consider the purpose your image plays in the context of your content.
  • Because of character limits on different screen reader software, try to keep your alt text fewer than 140 characters.
  • If an image is purely decorative, enter a space in the alt text field to mark it null.

Avoid using images with text

  • Screen readers are not able to read text displayed within an image.
  • Images with text are difficult to read on smaller screens and can appear pixelated when magnified.
  • Remove instances of images with text being used in promos and as section headers — always use rich text formatting for your headings.
  • Logotypes (logos with text) are okay to use with alt text.

Review your infographics

  • Infographics must include a full text description, located in the main body of your page or within an Expandable component.
  • Note in your alt text where site visitors can locate the full text description.
  • Some colors are inaccessible to users with color blindness, so do not rely on color alone to convey messages in graphics.

Infographic Example 1

The Ecological Model, graphic with text and 4 overlapping ovals. Read text below image for longer description.

Identify the image in fewer than 140 characters as alt text. For example, "The Ecological Model. Four groups are stacked as progressively smaller ovals. See longer description in expandable/body of text." In the body of the page or expandable, provide a longer description such as: "The Ecological Model. Four groups are stacked as progressively smaller ovals. Each group covers some area of the previous group. The groups, from largest to smallest, are: Societal, Community, Relationship, and Individual." Include additional description as needed.

Infographic Example 2

Bar graph. Title: Status of State Anti-Bullying/Harassment Laws 2003-2014. Read text below image for longer description.

Include in alt text: "Bar graph. Title: Status of State Anti-Bullying/Harassment Laws 2003-2014. See expandable/body of text for long description." In the longer description, you may describe it in more detail. For example, "The x-axis is year 2003 to 2014 in increments of one year. The y-axis is number of states from 0 to 50 in increments of 5. ..."

Accessibility Checklist

  • Are useful alt text descriptions provided?
  • Are full text descriptions for infographics provided?
  • Are images with text removed?
  • Have images with text been replaced with appropriate rich text heading formatting, or promo components?

Resources