Image maps use coordinates to place a link on a specific area of an image.

Why do client-side image maps provide better accessibility?
A "client-side" image map contains a number of pieces of information : mapping of active areas ( or hot spots ) of the image, URL information, and the ALT text in the HTML document. Because the client-side image map resides in the HTML document, ALT attributes are accessible to screen readers. This feature means that someone using a screen reader can easily identify and activate regions of the map.

Creating a basic client-side image map requires several steps:

• Identify an image for the map. First, an image must be used in a client-side image map. This image is identified using the <img> tag. To identify it as a map, use the "usemap" attribute.

• Use the <MAP> tag to "areas" within the map . The <MAP> tag is a container tag that includes various <AREA> tags that are used to identify specific portions of the image.

• Use <AREA> tags to identify map regions . To identify regions within a map, simply use <AREA> tags within the <MAP> container tags. Making this client-side image map accessible is considerably easier to describe: simply include the "ALT" attribute and area description inside each <AREA> tag. The following HTML demonstrates how to make a client-side image map:

Accessible HTML
<map name="community-options">
<area shape="rect" coords="   0, 45, 127, 129" href="aviation.htm" ALT="Aviation Community">
<area shape="rect" coords=" 130, 45, 270, 129" href="submarines.htm" ALT="Submarine Community">
<area shape="rect" coords=" 275, 45, 410, 129" href="surface.htm" ALT="Surface Community">
</map>

<img src="Images/communites.gif" width=413 height=132" usemap="#community-options" border=0 ALT="Professional Communities">

Working Example

Previous Slide

First Slide

Next Slide