Alternative Text (Alt Text)

Alternative text (alt text) provides a textual alternative to non-text content in web pages. It is especially helpful for people who are visually impaired or cognitively disabled and rely on screen readers. Screen readers identify and interpret a website's content using text-to-speech, sound icons or braille output devices. Alt text is a crucial element for creating an accessible website.

A successful, accessible website includes alt tags for every image. While it only takes a few minutes (sometimes only a few seconds) to add alt text, there are no existing, straightforward rules.

How to enter alt text for images added using the Image Element:
  • Use the Advanced menu as shown below. 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. 
How to enter alt text for images added using the Slideshow or Gallery elements:
  • For slideshows, click on Add / Edit images, then the capital T on each image. 
  • For gallery images, click on the image, then the capital T on the image.

Alternative text serves several functions:
  • Screen readers read it in place of images. This makes the content and function of the image accessible to those with visual or 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.
The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. As developers, text must be provided to the user which presents the CONTENT and FUNCTION of the images within your web content.

Alternative text can be presented in two ways:
  • Within the alt attribute of the image element.
  • Within the context or surroundings of the image itself.
This means that the alt attribute (sometimes called the alt tag) is not the only mechanism for providing the content and function of the image. This information can also be provided in text adjacent to the image or within the page containing the image. In some cases where the equivalent cannot be presented succinctly, a link that references a separate page that contains the longer description can be provided.

Decorative images do not present important content, are used for layout or non-informative purposes, and do not appear within a link. In almost all cases, spacer and decorative images should have null alt text (alt="").

Visit Alt Text Techniques for more information.