Accessible Images

Alternative Text (Alt Text)

Web editors should add descriptions for all graphics (photographs, charts, or other images) used on their site. This description is called alternative (alt) text. When a screen reader reaches an image on your page, it will read out loud the description you have added. Alt text allows a user of a screen reader to get a sense of what that image is and its purpose in context.

How to Add Alt Text to Your Images:

Inline Images
  1. Navigate to the page where your image is located.
  2. Click on the Edit tab. Scroll to the WYSIWYG area and select your image.
  3. Right click and choose Edit Image. A pop up window will appear showing the Alternative Text text field.
  4. Enter your alt text and submit.

how to add alt text in the cms

Captioned Images (Zeta Templates)
  1. Navigate to the page where your image is located.
  2. Click on the Edit tab. Scroll to the Captioned Image dialog. The field for Alternative Text is just above the Caption field.
  3. Enter your alt text and submit.

screen shot of the captioned image dialog

Keep in Mind

Decorative images

Images that are purely decorative or descriptively captioned should be marked as such in the CMS by checking the box labeled "This is a decorative image." This setting does not apply to most images.

Insert/Edit image window on CMS

Images of words

If you aren't sure if your text is real text or an image, try to copy-paste it. If you cannot copy-paste your text, it is likely an image and will require alt text. This logo is an example of text that is an image and not real text.

Support the Rose Art Museum

Appropriate alt text in this example would be "Support the Rose" or "Support the Rose Art Museum." In a more complicated example, such as an image overlaid with text, you would want to both describe the image and include the text. For example,

a dynamic play at a women's soccer game, text: can you see yourself here?

Appropriate alt text in this example might be, "a dynamic play at a women's soccer game, text: can you see yourself here?"

Remember to use high-contrast text to background ratios, even when the text is actually in an image.

Writing Helpful Alt Text

When authoring alt text, consider the context in which the image is being used. Your goal is to convey in words the information another user might gain visually. How would you describe the image to someone on the phone?

Professor Parno talks to students at a wooded dig site in Concord, Massachusetts

This image could be described in many ways, including:

As the author of the document or website, it is your job to determine which alt text is the most useful in each case. What do you know about the image and why is it on the the page?

This image above was from the Brandeis homepage and links to a personal interest story on BrandeisNOW. The more detailed description is best, because it entices the visitor to read the article. Conversely, if this image was being used as a simple stock image of students, it would be adequate to put, “professor addresses students,” as the description. 

Think about the message other users are getting from your carefully selected image. The Alt text, “map of the U.S. Mid-Atlantic States,” may be sufficient, but if there is more detail apparent visually, consider adding it – “Map of the U.S. Mid-Atlantic States illustrating common routes of the Underground Railroad, circa 1855.”

Alt Text vs. Captions

Authoring alt text is similar to writing the caption for an image. If you also have captions, consider using variation in your wording between the alt text and the caption. The screen reader will read both the alt text and the caption and repetition can be frustrating to the user. Consider including more descriptive detail of what you see in the picture in the alt text compared to the text in the caption. If your caption or other surrounding text is already conveying all necessary visual information to the user, you may check "This is a decorative image" and leave the alt text field blank.

If you need help describing a particularly complex image, such as a graph or map, please reach out. We are here to help!