Recommended technique R1:
- Use the alt="text" attribute to provide text equivalents for images.
- Use alt="" for images that do not convey important information or that convey redundant information.
On this page:
Rationale
Nongraphical browsers and screen readers cannot reveal images to visually impaired users. To communicate the information users need, it is important to associate alternative text with all images, particularly active images such as links or buttons. The alternative text should be meaningful, like home page or search or go. When images are not active links, however, use alternative text appropriately. A person who listens to information cannot ignore text as a person viewing the page can ignore an image. If images are not important or if they are redundant, assign empty alternative text so that the assistive technology and nongraphical browsers ignore the image.
The use of alternative text is not just for people who have visual impairments; alternative text is also used by text-only browsers, search engines and displayless devices such as mobile phone browsers.
Techniques
The techniques provided here illustrate different types of images and give some guidance on appropriate alternative text. The National Braille Association (NBA) has published a Tape Recording Manual which gives instructions to readers on how to describe complex pictures when recording material for use by blind individuals. The World Wide Web Consortium has made available an excerpt from the NBA Tape Recording Manual to assist Web authors who are trying to describe complex images on their Web sites. It can also be used to describe complex images in documentation.
The following techniques are the minimum required to meet Checkpoint 1 from the IBM web accessibility checklist.
Standard images
For images on a Web page, equivalent alternative text must be assigned to each image.
If the image is a photograph of a person, the person's name would be appropriate alternative text.
For example:
<img src="sam.jpg" alt="Sam Palmisano"
width="150" height="175" />
The alternative text should replace the image. For example, the following image illustrates the proper placement of the glued joint on a packing carton. The first image has inappropriate alternative text. The second image has more appropriate alternative text.
Inappropriate alternative text
<img src="diestructure.gif" alt="Die Structure" width="364" height="450" />
Appropriate alternative text
<img src="diestructure.gif" alt="Proper positioning of the IBM logo on a box die structure will allow it to span a folded edge, not a glued seam" width="364" height="450" />
If the image is redundant or unimportant, empty alternative text should be assigned.
For example:
<img src="placeholder.gif" alt="" width="20" height="20" />
Animated images
For animated images, such as an advertising banner, equivalent alternative text must be assigned to each image, and it must include all important information from the image. For example:
<img src="125eseed8.gif" alt="www.eseeds.com is an IBM e-business. Click here to see the garden grow. eSeeds flourishing online business was cultivated by expert hands.
e-business, sprout, and IBM logos" width="125" height="125" />
Image links
When images of text are used as links, the ideal alternative text is the exact label contained in the image. For example, if the text for the graphic is labeled "Done," the alternative text should also be labeled "Done".
Do not use the alt attribute to add additional or verbose information. Users who "listen" to alternative text cannot ignore the text as a user viewing the page can ignore the image. For example, the phrase "Click here to complete the lesson" is not appropriate as alternative text for the following image:
<img src="done.gif" alt="Done" width="48" height="61" />
In their document, Techniques For Accessibility Evaluation And Repair Tools, the Evaluation and Repair Tools Working Group of the W3C Web Accessibility Initiative recommends that the target of a link be no greater than 60 characters.
Submit and input images
When images are used as Go or Submit buttons on forms, equivalent alternative text must be assigned. For example:
<input type="image" name="Go" src="btn_go.gif" alt="Go" />
Recommended techniques
Keep alternative text concise.
Alternative text should be kept short and to the point. For example:
- The alternative text describing the picture of Sam Palmisano is quite adequate. However, there are times when more of a description is required, such as with an animated image. In their document, Techniques For Accessibility Evaluation And Repair Tools, the Evaluation and Repair Tools Working Group of the W3C Web Accessibility Initiative recommends a maximum of 150 characters.
- A similar recommendation applies to alternative text on image links. In their document, Techniques For Accessibility Evaluation And Repair Tools, the Evaluation and Repair Tools Working Group of the W3C Web Accessibility Initiative recommends that the target of a link be no greater than 60 characters.
If more characters are required, consider using a long description.
Use the title attribute to enhance alternative text for image links
While it is not required, for images of text used as links, it is recommended to use a title attribute to describe where the link is going. The title can be more descriptive than the alternative text. If provided, graphical browsers will display the title text instead of the alternative text when the mouse pointer is positioned over the image. For example, the following image has alternative text of "Go" that is the text equivalent of the image and a title attribute of "Finish shopping and check out" which indicates more about will happen when the user selects the image link.
<img src="go.gif" alt="Go" title="Finish shopping and check out" width="48" height="61" />
For picture images used as links, it is not possible to provide a rule that works in all cases. In some cases, it may be appropriate to provide alternative text that represents the picture and title text that describes where the link is going. In other cases, it may be appropriate to simply have the alternative text describe where the link is going and omit the title text. Usability testing can help make the determination as to which approach is more appropriate.
Avoid making an image the target of a link
When an image is used as the target of a link, there isn't a way to add alt text to the image on the new page. Instead, consider creating a new HTML page, and on that page, add the image. You will then be able to add alt text to the image.
For example, do NOT use the following code:
<a href="http://www.ibm.com/image.gif">View the image</a>
Instead, use the following technique:
<a href="http://www.ibm.com/image.html">View the image</a>
On the image.html page, include the image element with appropriate alt text.
<img src="image.gif" alt="Sample image alt text">
Testing
Test the Web site to ensure that it complies with accessibility requirements.
Tools
You can use the following tools to test this checkpoint:
- A Web accessibility checking tool. Examples of these tools are listed on the Worldwide Web Consortium web site.
- A screen reader
Techniques
The following techniques are required to verify this checkpoint:
| Action | Result |
|---|---|
| 1. Test the Web site with a Web accessibility checking tool to identify missing alt="text" attributes or alt="" attributes. |
Pass:
|
|
2. View the page with a screen reader to verify images have appropriate alternative text. The Web accessibility testing tool verifies that images have alternative text, but cannot verify that alternative text is appropriate. You must test with a screen reader to verify the alternative text is meaningful.
|
Pass:
|
©2001, 2008 IBM Corporation
Last updated January 17, 2008.