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.
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.
Example 1 – Simple Image
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
The KU Jayhawk
Preferred alt text: alt=“Wikipedia entry for KU Jayhawk”
Example 3 – Descriptive Image
Text before image
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.