Web Accessibility

Images & Animations: Provide Equivalent Alternatives to Visual Content

Checkpoint 1.1 [Priority 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.

Text is considered accessible to almost all users since it may be handled by screen readers, non-visual browsers, and braille readers. When using images or animations, use the "Alt" tag to provide alternative text which describes the image to the user. Any image that has text in it should have that text as the alternative text, applet, sound or multimedia presentation. A few things to keep in mind when writing alternative text for images & animations:

• Keep the text length short for better readability - between 5 and 15 words.
• Use text that's meaningful. Text should define the images to your users.
• Leave alt tags blank only for icons and bullets. Better yet, use style sheets for this type of image. The IDD style sheet includes images for list items.

Quicktest! A good test to determine if a text equivalent is useful is to imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener?

Examples:

Here's an example of an image using an "Alt" tag. Run your mouse over the image to view the alternative text.

Adding alt-text to an image in Dreamweaver is done through the Image Properties palette. To add alt-text, select the image by clicking once on it. Enter a short description (up to 256 characters) of the image in the Alt box inside the Image Properties palette.

When using the IMG tag, specify a short text equivalent with the "alt" attribute. Here's what the HTML looks like:

When using OBJECT (animations), specify a text equivalent in the body of the OBJECT element: