A written description to convey the purpose of an image as it relates to the content of the webpage.

Why is Alt Text important?

  • Screen readers can read alternative text 
  • Improves search engine optimization by indexing the images
  • Act a substitute if the web fails to display an image. 
  • Helpful for some people with limited technology resources.

How to Write Alternative Text

To write good alternative text the author must first identify the purpose of the image by identifying the type of image they are dealing with. There are five different types of images: informative, decorative, functional, headshot and complex images.

Informative Images

Informative Images are images that represent concepts and information through pictures, photos, and illustrations. The text alternative, also called "alt text", is determined by the author based on the context, content of the image and how it is used. For example, every detail about a book a student is reading in an image might be less relevant and described only briefly if the image is used on a page that provides general study tips for students, where the details of the book might be really relevant if the image was used to promote a bookclub event where the book was being read in.

The alternative text has to be at least a short description conveying essential information from the image. In some situations where the content of the image is all or part of the conveyed information, the user might need detailed literal description.

In some situations a detailed literal description may be needed. In this case it might be helpful to include the description in the main text to benefit all readers.

How to Write Alternative Text for Informative Images

  • Convey the concept of the image in the context of the page; no more than 125 words.
  • Avoid writing a literal description of the image. 
  • Don’t use phrases such as, "image of ..." or "graphic of ..." to describe the image.
  • Set the image as decorative if the purpose is purely for decoration.

Example:

George Washington at Valley Forge

Painting is by John Dunsmore ca. 1907 and shows both George Washington and the Marquis de Lafayette on horseback. Note small cabins in the background. Image from Library of Congress

Most Succinct Alt Text:  "George Washington at Valley Forge" 

More Detailed Alt Text: "George Washington and Lafayette on horseback talking to soldiers in the snow at Valley Forge"

Detailed Alt Text Emphasizing Climate: "Valley Forge in winter. The landscape is snow-covered and soldiers are sitting by the open road with a campfire.”

The only purpose of decorative images is to add visual decoration to the page. Decorative images do not contain or add information. 

Decorative Images

Image may be decorative when they are:

  • Visual styling, for example, borders, break lines, corners
  • Supplementary to link text to improve its appearance
  • Illustrative images that do not contribute to the content

When Can You Skip Alternative Text?

  • The image provide no information or context: If an image does not provide any important information for users to understand the page content, the image can be considered decorative, therefore alternative text is not needed.
  • The information in the image is repeated nearby on the page: If the exact information communicated by the image is available in an accessible, easily found format nearby on the same screen, it can be considered decorative because it provides no new information and would be redundant to include

Use an empty alternative text (alt = “”) for decorative images so that the screen reader will ignore it. This avoids unnecessary information being read by the screen reader which would confuse users.

Set Image as Decorative Image on Cascade CMS

In Cascade CMS, when putting an image on a page, you will see the ‘Decorative Image’ Section.

To add an empty alternative text to any image, you can easily click yes for Decorative Image.

Example

Decorative Image of Star Trees

SUSTAINABILITY

Learn how sustainability and community intersect in our ecological programs. Discover how sustainability is a part of every major.

GO>

Notice the image of the trees above does not provide any context, and its function is only as decoration for sighted users. In this case, an empty alt text is the best option. 

Test for Accessibility

Use SiteImprove and WAVE to discover images on a page. To check if images on a page are accessible, make sure:

  • All non-decorative images have alternative text.
  • Alternative text should accurately reflect the image content

Exceptions: All decorative images should have an empty Alternative text.

Applicable WCAG Success Criteria

References

Willamette University

Marketing and Communications

Address
900 State Street
Salem Oregon 97301 U.S.A.

Back to Top