HTML Guides for usemap

An <img> with a usemap attribute is interactive content, so it can't be placed inside an <a> element.

The usemap attribute connects the image to a <map>, whose <area> elements define clickable regions, each usually with its own href. That makes the image interactive, and the HTML specification doesn't allow interactive content anywhere inside an <a>, whether or not the link has an href. A plain <img> without usemap is fine inside a link, which is why the validator names the attribute.

Wrapping an image map in a link puts links inside a link. A click on a region could follow the region's href or the outer link's, depending on the browser, and screen readers may announce the regions as links nested inside another link.

Decide which behavior the image needs. If the regions matter, move the image out of the <a>, and add a separate link next to it if you still want one to the whole destination. If the image only needs to be a single link, remove the usemap attribute and the unused <map>.

Invalid example

<a href="/regions">

<img src="regions.png" alt="Regions" usemap="#regions" width="200" height="300">

</a>

<map name="regions">

<area shape="rect" coords="0,0,200,150" href="/north" alt="North region">

<area shape="rect" coords="0,150,200,300" href="/south" alt="South region">

</map>

Valid example

<img src="regions.png" alt="Regions" usemap="#regions" width="200" height="300">

<map name="regions">

<area shape="rect" coords="0,0,200,150" href="/north" alt="North region">

<area shape="rect" coords="0,150,200,300" href="/south" alt="South region">

</map>

<p><a href="/regions">View all regions</a></p>