Images et textes alternatifs

Qu'est-ce qu'un texte alternatif ?

Imagine que tu envoies un email avec une image. Quelqu'un le lit avec un lecteur d'écran. Le lecteur d'écran ne peut pas "voir" l'image. Il va lire à voix haute le contenu de l'attribut alt.

C'est ça, un texte alternatif : une description textuelle de l'image pour les personnes qui ne peuvent pas la voir. Cela concerne les malvoyants, les aveugles, mais aussi les robots (Google Images les lit) et les navigateurs quand l'image ne se charge pas.

<!-- ✗ Manque le alt : le lecteur d'écran lit le nom du fichier -->
<img src="img/photo_123.jpg">

<!-- ✓ Alt descriptif -->
<img src="photo.jpg"
     alt="Sophie, 8 ans, lit un livre sous un arbre dans un parc ensoleillé">

Quand laisser le alt vide

Contre-intuitif, mais important : certaines images doivent avoir un alt="" vide. Quand ? Quand l'image est purement décorative et n'apporte aucune information.

Un lecteur d'écran qui rencontre alt="" ignore complètement l'image. C'est exactement ce qu'on veut pour les images décoratives.

<!-- Image décorative : fond, séparateur visuel, icône purement esthétique -->
<img src="wave-separator.svg" alt="" aria-hidden="true">

<!-- Image informative : apporte du contenu, doit avoir un alt -->
<img src="graphique-ventes.png"
     alt="Graphique montrant une hausse des ventes de 35% entre janvier et mars">

Écrire un bon texte alternatif

Quelques règles pour écrire des alt utiles :

• Décris ce que l'image montre, pas ce qu'elle est. "Photo de" ou "Image de" est redondant — le lecteur d'écran dit déjà "image".
• Sois précis mais concis. Idéalement moins de 125 caractères. Pour les images complexes, utilise aria-describedby.
• Inclus les textes présents dans l'image. Si une image contient du texte, celui-ci doit être dans le alt.
• Pense au contexte. La même image peut avoir un alt différent selon son usage.

<!-- ✗ Trop vague -->
<img alt="image">

<!-- ✗ Redondant (le navigateur dit déjà "image") -->
<img alt="Photo montrant un chat">

<!-- ✓ Descriptif et utile -->
<img alt="Chat roux endormi sur un canapé bleu">

<!-- ✓ Image dans un lien : décrit la destination -->
<a href="/contact">
  <img src="icone-email.svg" alt="Nous contacter par email">
</a>

aria-label : nommer un élément sans texte visible

aria-label permet d'ajouter un nom accessible à un élément qui n'a pas de texte visible ou dont le texte ne suffit pas. C'est très utile pour les boutons icônes.

<!-- ✗ Mauvais : le lecteur d'écran dit juste "bouton" -->
<button>✕</button>

<!-- ✓ aria-label décrit l'action -->
<button aria-label="Fermer le menu">✕</button>

<!-- ✓ Plusieurs liens "Lire la suite" sur une page -->
<a href="/article-1" aria-label="Lire la suite : Introduction au HTML">
  Lire la suite
</a>

aria-describedby : description longue

Pour les images complexes (graphiques, diagrammes), un alt court ne suffit pas. aria-describedby pointe vers un élément de la page qui contient une description détaillée.

<img src="graphique-annuel.png"
     alt="Ventes annuelles 2024"
     aria-describedby="desc-graphique">

<p id="desc-graphique">
  Le graphique montre les ventes mensuelles de janvier à décembre 2024.
  Le pic est en novembre avec 12 400 unités. Le creux est en février (3 200).
  La tendance générale est à la hausse avec une progression de 35% sur l'année.
</p>