1.1 Provide alternative text

You should create a short alternative text description for every image on the page. This is probably the most important thing you can do to do to make a page accessible. Screen readers read out this alternative text, text-only browsers such as Lynx display it, Google indexes it, and graphical browsers can display it as a tooltip.

You add alternative text with the alt attribute of the of the <img> tag. Ideally, the text provides the same information that the original image conveys. The most common mistake is to provide a description of the image without describing what job the image was doing on the page.

You should check for sensible alt attributes that display the purpose of the image. Here is a bad example:

This doesn't tell you anything. Nobody is interested in the file name. You need to know what the photograph is for. If you read the page aloud over the telephone, what would you say about the photograph to make the page comprehensible to the listener?

Add alternative text for:

General images, artwork, photographs, icons, logos
Decorative images such as bullets, graphical buttons, horizontal lines and spacer images. These images don't add any information to the page. They just make it look nice
Graphics that you use to link to other pages
Animated gifs
Image maps where each area is a separate button or link
ASCII art. This is a picture made up of many text characters. The resulting picture has a meaning that you can’t work out from the characters

General images

Use the alt attribute to provide alternative text for images on a your site. For example:

The text must be meaningful and should provide the same information that you get if you can see the image. Keep the text short and accurate and take into account the context and priority of the image. For example, if you have a photograph of a person, the person's name is appropriate alternative text.

If you have images next to each other without any space in between, for example in a navigation bars, there won't be any space between the alternative text. This can cause the words to run together and be highly confusing. If your images are arranged in this way, provide the space within the "alt" text, e.g:

Alternative text is not really useful for explaining information that is too complex to describe in only a few words. For example, if you were to display a bar chart of sales figures, you could use alternative text to give a basic description of the graph:

However, the information contained in the chart may require a longer description. In this case, you can use the long description longdesc attribute for the <img> tag to point to a separate page with description of the information conveyed by the image:

The sales.html page might say:

A chart showing how sales in the current year. The chart is a bar-chart showing percentage increases in sales by month. Sales in January were up 10% from last year, sales in February dropped 3%, ..

Note: A lot of browsers don’t support longdesc.

Alternatively, insert a link next to the bar chart, which is presented as a capital "D". The target of this link is the page that displays the long description.

Once users have read this, they can return to the page with the image.

Decorative images

If images are purely decorative, add empty alternative text so that the non-graphical browsers ignore the image. Decorative images might be bullets, spacers, or horizontal lines. You can include an asterisk instead of alternative text or you can use a null value. For example:

Note: The empty alt text has no characters between the quotes.

These techniques hide the decorative images for those who use adaptive technologies or text-only browsers. The user won't get lots useless descriptions such as "a blue line, bullet, bullet, bullet".

Hyperlink images

If you use an image as a link, specify alternative text for the image. You can add a title to describe the target of the link clearly and accurately . The text should be meaningful, like home page or search or go.

For example, you have a arrow that points to the left of the screen to signify that you can go back if you click on the arrow. Under the guidelines, you should provide a text alternative that says something along the lines of "Go Back to Previous Page".

You might have a button that looks like a question mark that links to a help page. The alt text might say "link to help page".

Animated images

Animated images need alternative text that describes both the appearance and the action of the art. It's best not to use animations if they are just for show and don’t provide any real content.

Stop animations after one or two rotations; if you cannot stop them, don't use them.

Client side image maps

Client-side image maps are accessible when you supply the alternative text for each area of the image map. You must provide alternative text for the image map itself as well.

You should:

Assign alternative text for each hotspot area of the map
Provide redundant text links
Set up a logical tab order for the image map

Scripts and applets

Scripts and applets provide things such as pop-up menus, scrolling tickers and interactive applications such as tax calculators or games written in Java or Macromedia Flash. Using a script or applet can potentially provide any effect or functionality.

You can use the <noscript> tag to provide a text equivalent for scripts. The W3C gives the following example.

If you use the <object> tag, provide a text equivalent in the content of the tag:

A more complex example takes advantage of the fact that you may embed the <object> tags to provide for alternative representations of information:

If you use the <applet> tag, provide a text equivalent with the alt attribute and in the content in the <applet> tag:

<applet code="Press.class" width="500" height="500" alt="Java applet: how temperature affects pressure">
As temperature increases, the molecules in the balloon...
</applet>

Multi-media

Multimedia is information presented in a combination of forms, including audio (speech, sounds, music, etc.) and images (video, text, graphics, pictures, animations, movies, etc.).

Animations created with a product like Macromedia Flash might combine images and audio. A Flash animation could include images, a narrative or voice-over and video. The images are contained on the image track, while the voice-over is contained on the audio track.

A text equivalent of the visual track fulfils essentially the same function or purpose as the visual. The text equivalent may be a description of the visual track, i.e., what it looks like or sounds like. It is presented in text format.

Captions are text equivalents of the visual content of a video. They are provided synchronously with the video content. Some media formats (e.g. QuickTime and SMIL) allow you to add captions and descriptions to clip. If you are using these formats, you should take advantage of these features.