ALT Text and Text Alternatives

Include an ALT attribute for every <area> tag in an image map

Techniques

Image maps let you provide multiple interactive areas, typically links, on a single image. Although each area in an image map is accessible to the keyboard, areas also require ALT text to inform assistive technology of the link's purpose. For ALT text, use the same text you would use if you were creating a text link.

Image Maps

An image map is a single image that is programmatically sliced into multiple interactive areas using the <map> and <area> tags. The <area> tags describe coordinates within the image that provide interactivity such as a link. In order to ensure the accessibility of these <area> regions, they should all use ALT text, just as an image does. Additionally, the entire image should receive ALT text, which may provide context for the links in the image map.

Example: ALT text in AREA tags

Select a New Mexico destination Albuquerque Santa Fe Taos

<img src="../images/nm-image-map.png" alt="Select a New Mexico destination" width="480" height="240" usemap="#Map" />

<map name="Map" id="Map">
<area alt="Albuquerque" shape="rect" coords="8,111,160,238" href="albq.html"/>
<area alt="Santa Fe" shape="rect" coords="169,111,324,238" href="sf.html"/>
<area alt="Taos" shape="rect" coords="332,113,477,238" href="taos.html"/>
</map>