Image réactive

Une image réactive est une image HTML découpée en zones cliquables, chacune menant vers un lien différent. Elle repose sur les balises map et area associées à un img via l'attribut usemap. Le RGAA exige une alternative textuelle sur l'image et sur chaque zone active.

Un organigramme où chaque nom mène vers la fiche du collaborateur. Une carte de France où chaque région ouvre sa propre page. Le point commun : une seule image, plusieurs zones cliquables. C'est le principe de l'image réactive. La technique existe depuis HTML 4, mais le RGAA la teste toujours.

#Trois balises, un mécanisme

Le fonctionnement repose sur un trio : <img> porte l'image et l'attribut usemap, <map> regroupe les zones, et chaque <area> définit une zone cliquable avec sa forme, ses coordonnées et sa destination.

<img src="carte-france.png"
     alt="Carte des régions de France :"
     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="Bretagne">
</map>

L'alt de l'<img> décrit le contexte global. L'alt de chaque <area> décrit la destination du lien. Les deux sont obligatoires. L'attribut shape accepte rect, circle et poly. La documentation MDN détaille la syntaxe complète.

#Deux niveaux d'alt, pas un seul

C'est le piège classique. Vous posez un alt sur l'<img> et vous passez au composant suivant. Sauf que chaque <area> avec un href a besoin de son propre alt.

<!-- ❌ L'image a un alt, les zones non -->
<img src="plan.png" alt="Plan du bâtiment" 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>
 
<!-- ✅ Chaque zone décrit sa destination -->
<img src="plan.png" alt="Plan du bâtiment :" usemap="#plan">
<map name="plan">
  <area shape="rect" coords="0,0,100,50"
        href="/accueil" alt="Hall d'accueil">
  <area shape="rect" coords="100,0,200,50"
        href="/salle-reunion" alt="Salle de réunion A">
</map>

Le critère 1.1 du RGAA et la technique H24 des WCAG sont explicites sur ce point. Sans alt sur les <area>, un lecteur d'écran annonce « lien » sans rien de plus. L'utilisateur navigue à l'aveugle.

#Côté client, jamais côté serveur

Il existe deux types d'images réactives. Côté client (usemap), le navigateur gère les zones et les alt sont lisibles. Côté serveur (ismap), les coordonnées du clic partent vers le serveur : aucune alternative textuelle possible dans le navigateur. Le tutoriel Images du W3C WAI recommande uniquement les cartes côté client.

Un point souvent oublié : les <area> avec href reçoivent le focus clavier nativement. Testez votre image réactive avec Tab. Si une zone n'apparaît pas dans l'ordre de tabulation, elle n'a probablement pas de href.

#En résumé

Une image réactive associe <img>, <map> et <area>. Chaque <area> cliquable a besoin d'un alt qui décrit sa destination. Utilisez usemap (côté client), pas ismap (côté serveur). Vérifiez la navigation au clavier.