Creating Accessible Images

Does every image have a suitable text alternative?

Images are great to help convey meaning in a quick way. However, unless a text equivalent is provided, information in images cannot be accessed or understood by users who cannot see them. This can result in screen reader users not being able to understand content or understand how to interact with content.

Alternative Text (alt text) is a description of an image. It is useful for screen reader users to understand or interact with content. It is also useful for those on slow connections or those who may have images turned off in emails.

Getting Started with Alt Text

  • Be concise and focus on the purpose your image plays in the context of your content
  • Write in plain language
  • Keep it less than 140 characters (similar to an old-style Tweet)
  • Exclude writing "image of" or "photo of" in your alt text.
  • Use proper nouns and names when appropriate. If a well-known person, place, or thing is in your image and it adds context to your content, go ahead and name it.
  • If an image is purely decorative, find the appropriate way to mark it as such on the platform you are using:

Avoid Images of 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.

Alt Text Template

Whenever we describe an image, we initially want to be brief. Start by thinking about the context of the text where this image appears. If the image was removed, would we miss out on important information or would we just lose aesthetics or complementary information?

Use our template to determine how detailed your alt text needs to be. Follow the order to ensure you're adding the appropriate information.

Order Item Note
1 What is it? e.g., Chart, Map Graph, Portrait
AVOID: Image of. Photo of.
2 Key people / things Name and/or descriptors.
Think about the context.
3 Key info or actions Additional details that enhance meaning or clarify.
(e.g., Landmarks, Clothing, Setting, Actions, Data)
4 More info (if needed) Opportunity to provide more information

Example: What should be the alt text?

Four student body leaders sit around the table, smiling and having coffee. One person takes notes while the others use their phones.

Context: This is an image featured on a website for Student Organizations under a section about the activities of Student Body Leaders. Using our alt text template, we can answer the following questions:

  1. What is it? A photo
  2. Key people/things? Four student body leaders
  3. Key info or actions? Table with coffee cups, notebooks, phones
  4. More info? Everyone is smiling

Suggested alt text:

Four student body leaders sit around the table, smiling and having coffee. One person takes notes while the others use their phones.

Complex Images - Charts, Graphs, and 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

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

Suggested alt text:

"Infographic: 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.

Chart Example

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

Suggested 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. ..."