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.


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 also provide alternative text for the image map itself, as required by Checkpoint 1.1a: Text alternatives.

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 and unit test techniques


To comply with this checkpoint, you must meet all of the following techniques.

  1. Client-side: Assign alt text for hotspot areas of client-side image maps.
  2. Server-side: Use server-side image maps only if the regions cannot be defined by an available geometric shape.

Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.

HTML examples

1. Client-side: Assign alt text for hotspot areas of client-side image maps.

To comply with this technique, you must implement the following example.

HTML example 1

Provide text alternatives for the <area> elements of image maps.

In the following example, the alternative text for the image map ("Home Navigation Bar") is succinct and describes its purpose.

Home Navigation Bar

Philosophy Portfolio Technology Employment Contact us

<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 and a desktop browser can tab to each area of the image map, see the visual focus indicator, and select that hotspot with the Enter key.

Note for iOS platform: Mobile Safari application developers must use a Bluetooth keyboard attached to an iOS device to test navigating an image map.

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 desktop browsers. However, when image loading is turned off, the alternative text for each area of the image map may not be displayed.

Required unit tests and tools for HTML development technique 1

Manually perform the following unit tests.

  • Locate the image maps.
  • Confirm that the alt text for each area element of the image map, as well as the image map itself, is meaningful.
  • Note for iOS platform: For mobile Safari, locate the image map and confirm that the alt text for each area is spoken when VoiceOver is enabled. Confirm using gestures only and with a Bluetooth connected keyboard (no gestures).

2. Server-side: Use server-side image maps only if the regions cannot be defined by an available geometric shape.

HTML 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>

HTML 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>

Required unit tests for HTML development technique 2

Manually perform the following unit tests.

  • Locate the image maps.
  • Confirm that one text link is provided for each hotspot that can be activated on the map.
  • Ensure the link text for each hotspot is meaningful.

IBM® Lotus® Domino® examples

For techniques that have no examples, refer to the HTML examples for guidance.

  1. Client-side: Assign alt text for hotspot areas of client-side image maps.

    To comply with this technique, you must implement the following example.

    Domino example 1

    Provide alternate text for all image map hotspots in Domino using these 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.

    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.

    Exit course

    Exit course. Defalt hotspot.

    Required unit tests for Domino development technique 1

    Manually perform the following unit test.

    • Locate the image maps.
    • Confirm that the alt text for each area element of the image map, as well as the image map itself, is meaningful.
  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 implementing this technique in Domino. Use the HTML example as a guide.


Recommended development techniques

Although you do not have to implement the recommended techniques in order to comply with this checkpoint, you should review them since they can improve the accessibility and usability of the application.

The recommended development techniques for this checkpoint are as follows:

  1. Use the title attribute on <area> elements.

Recommended development example

The title attribute on an <area> element can describe where the link is going.

Home Navigation Bar

Philosophy Portfolio Technology Employment Contact us

<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>


©2013 IBM Corporation

Last updated January 1, 2013.

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.