Sémantique des images

Dernière mise à jour : 31 mars 2026

Règles pour baliser les images, afin qu’elles soient accessibles.

Comment baliser une image pour qu’elle soit accessible

La sémantique des images permet de communiquer aux technologies d’assistance qu’un élément est un visuel, qu’il s’agisse d’un graphique, d’un logo, d’une icône, d’une photographie ou d’une illustration. Les attributs ajoutés aux images indiquent la manière dont l’image doit être annoncée par les lecteurs d’écran.

Durant la conception

Déterminer si l’image est décorative ou informative. En cas de doute, plus d’information sur le sujet est disponible dans la page visuels décoratifs ou informatifs.

Rédiger un texte alternatif clair et concis pour les images informatives. Si l'image est informative et qu’elle contient du texte, son texte alternatif doit contenir au moins le texte visible dans l'image.

Dans le code

Pour une image décorative

Il est recommandé de la rendre invisible aux technologies d'assistance. Voici comment y arriver, selon le type d'implémentation :

• Pour les balises <img> ou tout élément porteur d'un attribut role="img", il est recommandé d'utiliser un attribut alt vide et sans espace (alt=""). Le lecteur d'écran ignorera l'élément.
• Pour les éléments suivants, il est recommandé d’utiliser les attributs aria-hidden="true" ou role="presentation" pour qu’ils soient ignorés :
  • SVG : Balise <svg>
  • Canvas : Image bitmap via la balise <canvas>
  • Objets embarqués : Balises <object type="image/..."> ou <embed>
  • Éléments interactifs détournés : Bouton de type image <input> ou zones réactives <area> sans fonction informative
• Pour une image insérée via les pseudo-conteneurs ::before ou ::after, la bonne pratique consiste à :
  • encapsuler le pseudo-conteneur dans une balise neutre (exemple : <span>) ;
  • appliquer l'attribut aria-hidden="true" sur ce <span> pour garantir que le contenu généré ne soit pas vocalisé.

Pour une image informative

Il est recommandé d’utiliser une balise <img> avec un attribut alt descriptif, ou une balise <svg> accompagnée des attributs role="img" et aria-label. Cela permet aux lecteurs d'écran d'annoncer la nature de l'élément suivie de sa description.

Pour une image informative complexe

Pour les schémas, les infographies ou les cartes et graphiques avec une légende, il faut fournir un texte alternatif plus long afin de transmettre toutes les informations de l’image. Ce texte doit être visible par tout le monde, afin de faciliter la compréhension globale du contenu, au-delà des technologies d’assistance.

Il existe trois façons d’implémenter une alternative textuelle à une image informative complexe:

• Avec les éléments <figure> et <figcaption>
• En liant l’image et son alternative par un jumelage d’attributs aria-describedby + ID
• En intégrant l’alternative dans un tiroir d’accordéon ou dans une modale, qui apparaît grâce à un bouton adjacent à l’image