Techniques for WCAG 2.0

Skip to Content (Press Enter)

This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.

Hide All Edits   |   Toggle Deletions  |   Toggle Issue Numbers   |   Toggle [start]/[end] Markers   |   Show All Edits

Changes are displayed as follows:

-

H37: Using alt attributes on img elements

Applicability

[begin add]Images used within HTML documents.[end add] [begin delete]Documents that load images, when the image format is not an accessibility-supported content technology.[end delete]

This technique relates to:

Description

When using the img element, specify a short text alternative with the alt attribute. Note. The value of this attribute is referred to as "alt text".

When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image. [begin delete]If the text in the image is more than can fit in a short text alternative then it should be described in the short text alternative and a longdesc should be provided as well with the complete text.[end delete]

Examples

Example 1

An image on a Website provides a link to a free newsletter. The image contains the text "Free newsletter. Get free recipes, news, and more. Learn more." The alt text matches the text in the image.

Example Code:

<img src="newsletter.gif" alt="Free newsletter. 
   Get free recipes, news, and more. Learn more." />

Example 2

An image on a Web site depicts the floor plan of a building. The image is an image map with each room an interactive map area. The alt text is "The building's floor plan. Select a room for more information about the purpose or content of the room." The instruction to "select a room" indicates that the image is interactive.

Resources

Resources are for information purposes only, no endorsement implied.

HTML 4.01 IMG element

HTML 4.01 alt attribute

Tests

Procedure

  1. Examine each img element in the content

  2. Check that each img element which conveys meaning contains an alt attribute.

  3. If the image contains words that are important to understanding the content, the words are included in the text alternative.

Expected Results

[begin change]

Checks #2 and #3 are true.

[end change]