Making Accessible Websites for the United Nations

Page Design: Visual Elements

Alternative Text

WAI Definition (Checkpoint 1.1)

Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", 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.

Explanation

Provide a text equivalent for every non-text element as listed above. The text equivalent can be in the form of an "alt" attribute or a "longdesc" attribute.

Rationale

Some types of information may not be directly accessible to everyone.  Images, for example, are not directly accessible by someone who cannot see, and audio files are not directly accessible by someone who cannot hear. Certain users will therefore require that the equivalent information or functionality be provided in text format in order to be compatible with assistive technologies.

Technique

Use an "alt" and/or a "longdesc" attribute on every "img" element or other non-text object inserted in the HTML code.

The "alt" attribute gives a short description of the image. It is the most common way of providing an alternative text description.

Picture of New York City

"Alt" attribute for a photo of New York:

<img src="ny.jpg" ... alt="Picture of New York City" />

The "longdesc" attribute provides a link to a longer description of the image. This is particularly useful for images that convey a lot of information such as charts.

Sample pie chart image to describe long description

"Alt" attribute and "longdesc" for a pie chart

<img src="budget_chart.jpg" ... alt="Pie chart of the 2006 budget" longdesc="chart.htm" />

If an image does not convey any information and only serves a decorative purpose, add an empty "alt" attribute. Decorative elements can be defined in a CSS style sheet.

"Alt" attribute for a decorative image:

<img src="line.gif" alt="" /> (there should be no space between the quotes)

When an image is used in a form to replace a submit button, use the "alt" attribute.

"Alt" attribute for an image serving as a form button:

<input class="img_button" type="submit" name="Submit" value="Submit" alt="submit">

Validation

Test

Using the Firefox Web Developer's Toolbar (plugin):
Go to Images > Outline images without "alt" attribute
Go to Images > Replace images with "alt"

Success Criteria

No image exists without an "alt" attribute.

The information conveyed through the use of images is replaced by descriptive "alt" attribute. No information is missing.

There are no "alt" attribute with meaningless information (such as "spacer" or "blue line"). "Meaningless information" is considered information that is not fully descriptive of the element.