Alternative Text

Alternative Text

Alt Text

Alternative text provides a text-based description of images and graphics on the web . Alternative text is read by screen reader users and search engines. Alternative text is essential for web accessibility.

  • All images must have alt text.
  • Alt text should describe the image.
  • There is no need to include the words "photo" or "image of".
  • Alt text of graphics should contain the text in the graphic.
  • Exception: Person Profile alt text should be the person's first and last names only.
    • If the Jayhawk placeholder is used the alt text should be "KU Jayhawk".

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 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)

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 – 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 3 – 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