Accessible Image Maps

Table of Contents

1. Priority
2. Description
3. More Info
4. Coding/Best Practices
5. Testing/QA
6. Search Engine Optimization (SEO)
7. W3C Guidelines

Priority:

Required

Short Discription:

Use client-side image maps over server-side image maps whenever possible. All hot spots require alt tags.

More Info:

Image maps are simply images that have regions that are clickable. A good example would be a Mapquest map of the world where each continent is clickable and drills down to a map of that contintent. These links like any other link must be accessible and meaningful. This can be done easily by using ALT attributes.

Coding:

Best Practices:

How to markup Image Maps to Make Them Accessible

Guidelines:

• Always use an ALT attribute for each area on the map.

Example:

<img src=http://cdn.mapquest.com/mqatlasenglish/world width=550 height=353 usemap="#map" alt="World" border=0><table border=0 cellpadding=0 cellspacing=0>
<MAP name="map">
<AREA shape="rect" coords="279.4348752,158.01616,324.4039344,166.82616" href="?region=africa" title="Africa" alt="Africa">
<AREA shape="rect" coords="273.5526144,300.28004,352.2209808,309.09004" href="?region=antarctc" title="Antarctica" alt="Antarctica">
<AREA shape="rect" coords="152.2241136,147.6556,222.64632,156.4656" href="?region=caribean" title="Caribbean" alt="Caribbean">
<AREA shape="rect" coords="255.1361904,50.60464,300.6549936,59.41464" href="?region=arctic" title="Arctic" alt="Arctic">
<AREA shape="rect" coords="388.5040848,104.20468,417.3106704,113.04992" href="?region=asia" title="Asia" alt="Asia">
<AREA shape="rect" coords="152.2241136,147.6556,222.64632,156.4656" href="?region=caribean" title="Caribbean" alt="Caribbean">
<AREA shape="rect" coords="272.12328,93.59744,320.1709056,102.44268" href="?region=europe" title="Europe" alt="Europe">
<AREA shape="rect" coords="90,253,140,272" href="?region=spacific" title="South Pacific Ocean" alt="South Pacific Ocean">
<AREA shape="rect" coords="180,122,239,140" href="?region=natlantc" title="North Atlantic Ocean" alt="North Atlantic Ocean">
<AREA shape="rect" coords="225,223,285,244" href="?region=satlantc" title="South Atlantic Ocean" alt="South Atlantic Ocean">
<AREA shape="rect" coords="329,51,414,59" href="?region=arcticoc" title="Arctic Floor" alt="Arctic Floor">
<AREA shape="rect" coords="365,204,407,222" href="?region=indian" title="Indian Ocean" alt="Indian Ocean">
</MAP>

Testing:

The AIS toolbar can be used to test by selecting the "Show Image Maps" from the "Images" tab.

The results of the toolbar test shows map areas without alt attributes:

SEO:

Since image maps define links of a web page, the search engine needs the ALT attribute to be able to determine the meaning of the link and thus index it.

W3C:

HTML Techniques for Web Content Accessibility Guidelines 1.0

Image maps