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. 

How to enter alt text for Singles Images, Slideshow Images, and Gallery Images

Single images added with 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. 

Slideshow images:

For slideshows, click on Add / Edit images, then the capital T on each image. 

Gallery Images:

For gallery images, click on the image, then the capital T on the image.

Why add alt text?

Alternative text serves several functions:
  • Screen readers announce alternative text in place of images, helping users with visual or certain cognitive disabilities perceive the content and function of the images.
  • If an image fails to load or the user has blocked images, the browser will present the alternative text visually in place of the image.
  • Search engines use alternative text and factor it into their assessment of the page purpose and content.
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:
  1. Within the alt attribute of the image element.
  2. 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.