Understanding Accessibility

Guideline 9. Design for device-independence.

Checkpoint 9.1 - Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape

Server-side image maps use cgi-bins to control the image links. Client-side image maps use the <area> tag in the HTML code.

How do I do it?

Use client side image maps where possible. More support for these is available from assistive devices. Further Information on client-side image maps is available from Dreamweaver Notes - Image Maps & Hotspots.

The code generated by client-side image maps looks like this.

html

<img src="images/sitemap.gif" width="400" height="400" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="37,7,94,46" href="index.htm">
<area shape="rect" coords="141,10,236,51" href="contact.htm">
<area shape="rect" coords="322,16,401,56" href="about.htm">
</map>

Xhtml

<img src="images/sitemap.gif" width="400" height="400" border="0" usemap="#Map" />
<map name="Map">
<area shape="rect" coords="37,7,94,46" href="index.htm" />
<area shape="rect" coords="141,10,236,51" href="contact.htm" />
<area shape="rect" coords="322,16,401,56" href="about.htm" />
</map>

How do I check that it meets the WCAG criteria?

I may be possible to validate this checkpoint automatically with webXact, but none of the sites I checked triggered this checkpoint so I am unable to verify this.

guideline 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14