Text Tags

Accessibility Standards Checklist

Requirement

Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", "title", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.

Reason

Screen readers for visually impaired users cannot reveal images. In order to communicate the information, you must associate alternative (alt) text with images. This is particularly important when using active images such as navigation or buttons. The alt text for active images (images that do something) should be the same as what is displayed on the image itself, such as "Next" or "Back" because assistive browsers use the alt tag to identify the action. For example, if a graphical link shows "Next" on the image, someone using a voice-command browser would say "Next" to follow that link. However, if the alt tag for "Next" is "Continue" or "Next Page," the browser will not know which link that is. If images are not important or are redundant, then assign empty alt text so that the assistive technology and nongraphical browsers ignore the image. You can view the text you placed for your images by moving your cursor over the image. You will see a box appear with the text you entered. It is equally important to include the (title) tag with duplicate alt text for browsers that are incompatible with the (alt) tag.

The longdesc attribute is mentioned in the requirement. Longdesc is a longer description that replaces the alt attribute, which might be used with an image of a graph or chart to summarize. You would have to link to an HTML page that would explain the image in detail. But the longdesc is not supported well by screen readers. Try to avoid using the longdesc attribute by placing text about the image near the image itself.

Examples

In the examples you will notice that some alt tags have periods at the end and some use brackets. You can use either within your alt tags. This lets the assistive technology know that a pause or break is needed so the text will not run together.

Standard Images

If the image is of an object or person and conveys important information, describe what it is. For example, the image below is a banner advertising a service offered by Tennessee.gov. Your alt and title text would be:

  • Schedule Driver License Appointments Online.
  • <img src="images/banner.gif" alt="Schedule Driver License Appointments Online." title="Schedule Driver License Appointments Online." >

Active Images

If the image is associated with an action, describe the the action. For example, the image below is a button to log into a section of a Web site. Your alt text would be:

  • Log in.
  • <img src="images/b_login.gif" alt="Log in." title="Log in." >

If an image is used as a submit button, you would still need the alt attribute:

  • <input type="image" name="login" src="images/b_login.gif" alt="Log in." title="Log in.">

Unimportant Images

If the image is unimportant or redundant, you should NOT describe the image. For example, the purpose of the image below is a spacer. Your alt attribute would be:

  • <img src="images/spacer.gif" alt="">

The double quotes will be skipped by a screen reader rather than alerting the user of an image that is only used for white space. But never leave out the alt attribute in any case, simply use the double quotes.

Animated Images

If the image is a animated and conveys important information, describe the image and its motion.
For example, the image below is the Tennessee state flag waving in the wind. Your alt text would be:

  • State of Tennessee flag waving in the wind.
  • <img src="images/tnflag.gif" alt="State of Tennessee flag waving in the wind." title="State of Tennessee flag waving in the wind.">

Images Side-by-Side

When images are turned off, adjacent images can convey surprising messages.

  • Photo of Terese running.Her Kitten.

In a non-graphical browser, the text equivalents for the above side-by-side images would run together and be read as:

  • Picture of Terese walking Her Kitten

This confusion can be avoided by putting the images on separate lines, or by using punctuation or brackets in your alt-text for side-by-side images:

  • [Picture of Terese running] [Her Kitten] or
  • Picture of Terese running. Her Kitten.

Suggestions for testing this on your pages

[Back To List]