How to markup Image Maps to Make Them Accessible

Donald F. Evans

August 30, 2006

Question

How do we markup an image map to make it accessible?

Answer

From our friends at Mapquest, we have a good example of how to mark up an image map. To the screen reader, each area appears as a separate link on the page. It's simple, just be sure to use alt attributes. And remember to use alt="" if you don't want the screen reader to voice the link.

Example

<IMG ismap usemap="#map" src="../norm_map/world.gif" alt="World" hspace=0 vspace=0 border=0>
<MAP name="map">
		<area alt="Continent Maps">
		<Area shape="rect" coords="315,179,368,192" alt="africa" href="africa.htm">
		<Area shape="rect" coords="310,339,399,353" alt="antarctica" href="antarctc.htm">
		<Area shape="rect" coords="438,117,473,133" alt="asia" href="asia.htm">
		<Area shape="rect" coords="308,106,363,120" alt="europe" href="europe.htm">
		<Area shape="rect" coords="130,118,192,144" alt="north america" href="namerica.htm">
		<Area shape="rect" coords="191,213,253,240" alt="south america" href="samerica.htm">
		<Area Alt=" Nation Maps">
		<Area shape="rect" coords="172,167,252,179" alt="antilles" href="caribean.htm">
		<Area shape="rect" coords="172,167,252,177" alt="caribbean" href="caribean.htm">
		<Area Alt="Ocean Maps">
		<Area shape="rect" coords="354,55,451,68" alt="arctic floor" href="arcticoc.htm">
		<Area shape="rect" coords="274,57,326,72" alt="arctic" href="arctic.htm">
		<Area shape="rect" coords="412,227,467,257" alt="indian ocean" href="indian.htm">
		<Area shape="rect" coords="205,138,272,163" alt="north atlantic ocean" href="natlantc.htm">
		<Area shape="rect" coords="527,142,582,166" alt="north pacific ocean" href="npacific.htm">
		<Area shape="rect" coords="57,135,113,162" alt="north pacific ocean" href="npacific.htm">
		<Area shape="rect" coords="29,227,94,241" alt="oceania" href="oceania.htm">
		<Area shape="rect" coords="529,224,593,238" alt="oceania" href="oceania.htm">
		<Area shape="rect" coords="256,252,328,280" alt="south atlantic ocean" href="satlantc.htm">
		<Area shape="rect" coords="102,286,161,310" alt="south pacific ocean" href="spacific.htm">
		<Area shape="rect" coords="240,312,368,326" alt="southern ocean" href="southocean.htm">
		<Area onmouseover="csaction(new array(/*cmp*/'b9142f35329'));return true;"
			onmouseout="csaction(new array(/*cmp*/'b9142f35331'));"
			shape="rect" coords="6,7,157,35" href="#facts" alt=""
			csout="b9142f35331" csover="b9142f35329">
</MAP>

Other Resources