Responsive Image

A responsive image is an HTML image divided into clickable areas, each leading to a different link. It relies on map and area tags associated with an img via the usemap attribute. RGAA requires text alternatives on the image and on each active area.

An organization chart where each name leads to the employee's profile. A map of France where each region opens its own page. The common thread: a single image, multiple clickable areas. This is the principle of the responsive image. The technique has existed since HTML 4, but RGAA still tests it.

#Three tags, one mechanism

The mechanism relies on a trio: <img> carries the image and the usemap attribute, <map> groups the areas, and each <area> defines a clickable zone with its shape, coordinates, and destination.

<img src="carte-france.png"
     alt="Map of French regions:"
     usemap="#regions">
 
<map name="regions">
  <area shape="poly" coords="210,45,245,80,200,95"
        href="/ile-de-france" alt="Île-de-France">
  <area shape="poly" coords="80,60,120,55,110,100"
        href="/bretagne" alt="Brittany">
</map>

The alt of the <img> describes the global context. The alt of each <area> describes the link destination. Both are mandatory. The shape attribute accepts rect, circle, and poly. MDN documentation details the complete syntax.

#Two levels of alt, not just one

That's the classic pitfall. You add an alt to the <img> and move on to the next component. Except each <area> with an href needs its own alt.

<!-- ❌ The image has alt, the areas don't -->
<img src="plan.png" alt="Building floor plan" usemap="#plan">
<map name="plan">
  <area shape="rect" coords="0,0,100,50" href="/accueil">
  <area shape="rect" coords="100,0,200,50" href="/salle-reunion">
</map>
 
<!-- ✅ Each area describes its destination -->
<img src="plan.png" alt="Building floor plan:" usemap="#plan">
<map name="plan">
  <area shape="rect" coords="0,0,100,50"
        href="/accueil" alt="Reception hall">
  <area shape="rect" coords="100,0,200,50"
        href="/salle-reunion" alt="Meeting room A">
</map>

RGAA criterion 1.1 and WCAG technique H24 are explicit on this point. Without alt on the <area> tags, a screen reader announces "link" with nothing more. The user navigates blind.

#Client-side, never server-side

There are two types of responsive images. Client-side (usemap), the browser handles the areas and the alt texts are readable. Server-side (ismap), the click coordinates go to the server: no text alternative possible in the browser. W3C WAI Images tutorial recommends only client-side maps.

A point often overlooked: <area> tags with href receive keyboard focus natively. Test your responsive image with Tab. If an area doesn't appear in the tab order, it probably doesn't have an href.

#In summary

A responsive image associates <img>, <map>, and <area>. Each clickable <area> needs an alt that describes its destination. Use usemap (client-side), not ismap (server-side). Verify keyboard navigation.