Aller au contenu principal
Logo RGAA CheckerRGAA Checker
Critère 1.4

Images réactives (Image Maps)

Chaque zone cliquable d'une image réactive doit avoir une alternative textuelle.

En Bref : L'essentiel à retenir

  • Les images réactives, définies par `<map>` et `<area>`, permettent de créer des zones cliquables sur une image.
  • Pour l'accessibilité, il est crucial d'ajouter l'attribut `alt` à chaque balise `<area>`.
  • Cet attribut `alt` doit fournir une alternative textuelle claire et spécifique à chaque zone cliquable.
  • Les erreurs fréquentes incluent l'omission de l'attribut `alt` ou l'utilisation d'un texte générique comme valeur.

Objectif

Les images réactives (balise <map> et <area>) permettent de définir des zones cliquables sur une image. Chaque zone doit être identifiable par les lecteurs d'écran.

Solution Technique

Ajoutez un attribut alt à chaque balise <area>.

<img src="carte-france.png" usemap="#map-france" alt="Carte de France cliquable par région" />

<map name="map-france">
  <!-- ✅ Correct : Chaque zone a une alternative -->
  <area shape="poly" coords="..." href="bretagne.html" alt="Région Bretagne" />
  <area shape="poly" coords="..." href="normandie.html" alt="Région Normandie" />
</map>

Erreurs fréquentes

  • ❌ Oublier l'attribut alt sur les <area>.
  • ❌ Mettre un alt générique comme "zone1", "cliquez ici".

Ressources