Alternative Text


Alternative text provides a text-based context – both content and function - for images/graphics on the web that can be read by users, screen readers and search engines. Alternative text is essential for web accessibility.

Alternative text is a required for all images in the KU CMS.

Function of Alternative Text (WebAIM)

  • It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
  • It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
  • It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

(Source: WebAIM.org)

Qualities of Alternative Text (WebAIM):

Alternative text should:

  • Be accurate and equivalent in presenting the same content and function of the image.
  • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically, no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
  • DO NOT be redundant or provide the same information as text within the context of the image.
  • DO NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

(Source: WebAIM.org)

Strictly Decorative Images

In some cases, images do not provide additional context and/or value to someone using a screen reader. If an image is purely decorative, use double-quotes (“”) in the alternative text field to tell the screen reader to skip over the image. Only do this if you are sure the image is strictly decorative.

Examples

Example 1 – Simple Image

KU Jayhawk

The Jayhawk is an iconic presence on the KU campuses and on apparel and other promotional items. It often represents the university in place of or in addition to the KU logo and signature.

Preferred alt text: alt=“KU Jayhawk”

Example 2 – Decorative Image

KU Jayhawk

The KU Jayhawk

The Jayhawk is an iconic presence on the KU campuses and on apparel and other promotional items. It often represents the university in place of or in addition to the KU logo and signature.

Preferred alt text: alt=“”
Because the text below the image is redundant with what you would use as alt text, it is appropriate to consider the image decorative. The preferred alt text is double-quotes (“”).

Example 3 – Image as a Link

In this example, imagine the image is linked to a Wikipedia page about the KU Jayhawk

KU Jayhawk

The KU Jayhawk

Preferred alt text: alt=“Wikipedia entry for KU Jayhawk”

Example 4 – Descriptive Image

Text before image

KU Jayhawk

Text after image

Preferred alternative text: alt= “Students sit in a circle socializing in front of Frazer Hall”

When the image you have chosen is strategic and purposeful, providing good descriptive alternative text allows users via screen reader to understand why the image is present even if the image is not directly related to the main topic. In this example, the alternative text allows users to understand the emotional context of the campus experience. If you have selected images strategically, it will be relatively easy to describe the contextual value of those images for all users.

Support