Image maps

HTML allows two types of image maps: client-side (processed by the user's browser) and server-side (the server processes). Use client-side image maps whenever possible.

Accessible image maps have the following characteristics :

• Alt tags are associated with each hotspot.
• Redundant text links for every hotspot are included elsewhere on the page.
• The tab order of the image map should be logical.

Alt tags

Alt tags should be included for each image map hotspot. Example: <map name="banner"> <area shape="rect" alt="Calendar" href="calendar.html" coords="36,59 107,85"> <area shape="rect" alt="Phone, e-mail" href="phone.html" coords="108,5,185,85"> <area shape="rect" alt="Maps" href="map.hmtl" coords="186,59, 240,85"> <area shape="rect"alt="Search engines" href="search.html" coords="257,59,295,85"> </map>

Redundant text links

Put redundant text links for every link on an image map elsewhere on the web page. This redundant text often is placed at the bottom of the page.

Image map tab order

The tab order of an image map specifies how a user moves through the links, using a tab key instead of a mouse. Tabbing should take the reader through the links in a logical order. Either make sure each hotspot is defined in the order it appears on the page. Or use a "tabindex" attribute to define the order. <img src="imagemap.gif" alt="Navigation banner" width="360" height="18" border="0" usemap="#bannermap"> <map name="banner"> <area shape="rect" alt="Search engines" href="search.html" coords="257,59 295,85" tabindex="4"> <area shape="rect" alt="Calendar" href="calendar.html" coords="36,59 107,85" tabindex="1"> <area shape="rect" alt="Phone, e-mail" href="phone.html" coords="108,59 185,85" tabindex="2"> <area shape="rect" alt="Maps" href="map.hmtl" coords="186,59, 240,85" tabindex="3"> </map>

Client-side image maps are preferable to server-side image maps. If you're unsure what kind of map you have, check the code. "USEMAP" signifies client-side maps and "ISMAP," server-side maps.