Textes alternatifs : alt pertinents pour les images

L’objectif n’est pas de “mettre un alt”, mais de fournir une alternative qui aide vraiment les utilisateurs. Voici une méthode simple pour choisir entre alt descriptif, alt vide (alt="") ou masquage.

1) Alt informatif vs alt vide

Deux questions rapides :

  • Si l'image ne charge pas, est-ce qu’il manque une information ou une action ?
  • L’image apporte-t-elle une compréhension directe du contenu (ou du contexte) ?

Si la réponse est oui, l’alternative doit être descriptive et pertinente. Si la réponse est non (décorative ou redondante), vous pouvez utiliser alt="" et/ou un marquage décoratif adapté.

2) Différencier image utile et icône fonctionnelle

Les icônes sont fréquemment des signaux d’action :

  • icône seule sur un bouton,
  • icône qui remplace une étiquette de lien,
  • icône dans un contrôle custom.

Dans ces cas, l’alternative doit être alignée avec l’intention (ex : “Rechercher”, “Fermer”, “Télécharger”), et pas avec le nom du fichier ou une description vague.

3) Images “avec texte” : que faire ?

Quand le texte fait partie intégrante de l’image (bannière, pictogramme avec phrase, visuel marketing), l’alternative doit restituer ce qui est communiqué. Sinon, le contenu devient “invisible” pour les lecteurs d'écran.

Règle de décision : si le texte écrit dans l'image est important pour comprendre, l’alternative doit le transmettre (au moins sous forme résumée).

4) SVG, décoratif et attributs ARIA

Les SVG peuvent être traités comme des images (avec role/aria-label) ou marqués décoratifs. Pour rester simple :

  • si c’est décoratif : marquage décoratif (ex : aria-hidden="true" ou rôle adapté selon le contexte),
  • si c’est informatif : donner une alternative cohérente (role/label) ou du texte accessible.

Checklist alt (pratique)

  • Pas de “photo”, “image”, “icon” générique : décrivez l'effet ou le sens.
  • Pas de nom de fichier comme alternative.
  • Pour décoratif : utilisez alt="" ou masquage approprié.
  • Pour icône fonctionnelle : décrivez l’action (et non l’apparence).
  • Pour image avec texte : retransmettez l’information essentielle.

FAQ rapide

Alt vide (alt="") est-ce toujours une bonne idee ?

Non : alt="" convient uniquement si l’image n’apporte pas d’information utile. Si l’utilisateur en a besoin, il faut un alt informatif.

Peut-on utiliser aria-label à la place de alt ?

Dans certains cas, oui (selon le type d'élément). L’important est d’offrir une alternative accessible et pertinente.

Comment rédiger un alt “pertinent” en 10 secondes ?

Demandez-vous : “Si je supprime l’image, que dois-je dire pour que le sens reste identique ?”. Écrivez ensuite une phrase courte et utile.

Prochain pas : validez aussi la navigation clavier et le focus visible, car un alt correct ne suffit pas si l’interaction n’est pas accessible.