Client-side image maps are used and alternative text is provided for image map hot spots. Equivalent text links are provided if a server-side image map is used.
On this page:
Rationale
Server-side image maps are currently not accessible to anyone using non-graphical browsers or browsers with images turned off. Client-side image maps are accessible when alternative text is supplied for each area of the image map. You must provide alternative text for the image map itself as well as required by Checkpoint 1.1a.
When an image map requires regions that cannot be defined by an available geometric shape, a server-side map may be used. In this case, provide a list of equivalent links, one for each URL that can be activated through the map. For example, a map of the United States as a server-side map needs a list of the individual states with a combo box or another method for choosing a state. The equivalent links should be as convenient for those who do not use a mouse as the server-side map is for those who do use a mouse.
Required development techniques
Compliance with this checkpoint requires all of the following techniques be met.
- Client-side: Assign alt text for hotspot areas of client-side image maps.
- Server-side: Use server-side image maps only if the regions cannot be defined by an available geometric shape.
Examples for HTML developers
1. Client-side: Assign alt text for hotspot areas of client-side image maps.
To comply with this technique, all of the following examples must be implemented.
Example 1
Provide text alternatives for the area elements of image maps.
As required by Checkpoint 1.1a, the following example shows the alternative text for the image map is "Home Navigation Bar". The alternative text is succinct and describes its purpose.
<img src="home.gif" usemap="#HomeNav_Map" alt="Home Navigation Bar" />
<map name="HomeNav_Map">
<area coords="15,7,94,23" shape="rect" href="philosophy.htm" alt="Philosophy" />
<area coords="109,7,176,23" shape="rect" href="portfolio.htm" alt="Portfolio" />
<area coords="196,7,276,23" shape="rect" href="technology.htm" alt="Technology" />
<area coords="300,7,390,22" shape="rect" href="employment.htm" alt="Employment" />
<area coords="407,7,484,23" shape="rect" href="contact.htm" alt="Contact us" />
</map> Each area of the image map has alternative text that is the same as the text label on the image. A nongraphical browser will render alternative text as the links of the image map. A sighted user using only the keyboard can tab to each area of the image map, see the visual focus indicator, and select that hotspot with the Enter key.
Note: If the title attribute is also provided, when the cursor is moved over a client-side image map, the title attribute information is displayed as text pop-ups in browsers. However, when image loading is turned off, the alternative text for each area of the image map may not be displayed.
2. Server-side: Use server-side image maps only if the regions cannot be defined by an available geometric shape.
Example 2
Provide a list of equivalent text links for server-side image maps. Include one text link for each hotspot that can be activated on the map.
In this image of a world map, each country could be a hotspot. To make the image accessible, list each of the countries as hypertext links.
Austria | Australia | etc. Belgium | Belize | etc. USA | etc.
<a href="cgi-bin/countries/database"><img src="worldmap.gif" alt="World Map" ISMAP /></a>
<a href="austria.html">Austria</a>|<a
href="australia.html">Australia</a>
Example 3
As an alternative to an inline list of equivalent text links, provide a hypertext link next to the map.
In this example, "Choose a Country" is a link that accesses a list of countries on a separate page. It is important that equivalent links be as convenient for the users as the server-side map.
Choose a Country
<a href="cgi-bin/countries/database">
<img src="worldmap.gif" alt="World Map" ISMAP /></a>
<a href="countrylist.html">Choose a Country</a>
Examples for Domino developers
For techniques that have no examples, refer to the HTML example sections for guidance.
1. Client-side: Assign alt text for hotspot areas of client-side image maps.
Example 4
Provide alternate text for all image map hotspots in Domino using the steps:
- Select each hotspot and open the Hotspot Properties box.
- Select the Advanced tab. In the Alternate Text field, enter a description of the image.
Example 5
Provide alternate text for the image map itself in addition to the hotspots:
- Select the picture that is being used for the image map and open the Picture Properties box.
- Select the Picture Info tab. In the Alternate Text field, enter a description of the image map. The alternate text should not be too verbose.
This example shows the correct way to add alternate text for a hotspot image. Note that the tab order for the image has also been defined. This improves the usability of the image map by ensuring the tab order is logical.
2. Server-side: Use server-side image maps only if the regions cannot be defined by an available geometric shape.
There are no specific examples for Domino developers.
Recommended development techniques
The techniques above are required; the following techniques are recommended to enhance accessibility:
1. Use the title attribute on area elements.
The title attribute on an area element can describe "where" the link is going.
Recommended Example 1
<img src="home.gif" usemap="#HomeNav_Map" alt="Home Navigation Bar" />
<map name="HomeNav_Map">
<area coords="15,7,94,23" shape="rect" href="philosophy.htm" alt="Philosophy" title="Our Company Philosohy" />
<area coords="109,7,176,23" shape="rect" href="portfolio.htm" alt="Portfolio" title="Our Product Line" />
<area coords="196,7,276,23" shape="rect" href="technology.htm" alt="Technology" title="Technologies We License for Your Products" />
<area coords="300,7,390,22" shape="rect" href="employment.htm" alt="Employment" title="Employment Opportunities Worldwide" />
<area coords="407,7,484,23" shape="rect" href="contact.htm" alt="Contact us" title="Locations, Phone numbers, and e-mail Addresses" />
</map>
Required test techniques
The following test tools and techniques are required to test this checkpoint.
Test tools:
Install the following tools to test this checkpoint:
Required accessibility verification test techniques:
Use the following accessibility verification test (AVT) techniques to validate the Web content. It is recommended that these tests be performed in order.
| Action | Result |
|---|---|
|
Test the Web site with a Web syntax analyzer to verify the compliance criteria as follows: Verify that the tool does not identify
|
Pass:
Fail:
|
| Action | Result |
|---|---|
|
Verify the following compliance criteria with a screen reader.
|
Pass:
Fail:
|
©2009 IBM Corporation
Last updated May 28, 2009.
W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.