Equivalent Text for Non-text Elements

General comments

This provision is necessary because assistive technology cannot describe non-text elements such as images, navigation arrows, multimedia objects (audio or video), logos, photographs, artwork, or Java applets, but can convey associated text information to the user. This association is done by means of "alt" tags and is easy for anyone familiar with HTML. While some images may contain text - for example, a button image bearing the words "next page" - this text is not available to users of screen readers unless an "alt" tag with alternative text is provided, indicating that the button link goes to the next page.

Since audio is a non-text element, this provision also requires that when audio presentations are available on a web page, text in the form of captioning must accompany the audio to allow people who are deaf or hard of hearing to comprehend the content. See also Guidance on Rule b, which requires that equivalent alternatives for any mulitmedia presentation be synchronized with the presentation.

Example

To embed an image into a Web page, the designer uses an HTML tag to identify or "point to" a separate computer file that contains the actual image.

For example,

<IMG src="doclogo.jpg">

could be used to display an image, from a separate file called "doclogo.jpg" of the Department of Commerce seal. Such an image could also be used as a hyperlink. While a screen reader cannot "look" at the resulting image and recognize it, it can read a text description of it, if one were provided. The same is true for refreshable Braille displays and other types of assistive technology delivery devices. Therefore, a meaningful text description would be needed so that users with disabilities could know what the image conveys. The simplest way of doing this is probably the use of the "alt" attribute of the <img> tag. For the DOC logo example, this would be:

<img src="doclogo.jpg"
alt="Department of Commerce logo">

Compare the three images below (the first without alt tag, the second with alt tag, and the third an image used as a link, with an alt tag):

Department of Commerce logoCommerce Seal with link to Main Content of Page

In the case of the third image above, the screen reader will recognize that the image is a link, so the alt tag does not need to state that information. However, from a usability point of view, it is always a good practice to describe where the link is taking the user.

Images Used as Bullets / Whitespace / Spacers

Even where an image does not convey any real content, a text description must nevertheless be provided in order to enable users with disabilities to distinguish important content from merely decorative images. Omitting an alt tag will make screen reading software read out the filename of the graphic as the alt tag.  Such non-content providing graphics should be labeled with alt=" " (quote, space, quote) which will allow the screen reading software to skip over the image without reading anything out to the user. Example:

<IMG src="whitespace.gif" width="1" height="50" alt=" ">

Refer to Rule o for information on using hidden images for skipping repetitive navigational links.

Alt tags with Java applets, Scripts, and Other Programmatic Objects

For more guidance on using alt tags with programmatic objects, see generally Rule l and Rule m, or specifically the entries on Java applets and scripts.

Department of Commerce Web Advisory Council (WAC)
U.S. Department of Commerce

Send questions and comments about this page to WAC@doc.gov
Page last updated October 12, 2010