Les deux vies d'une image

Ce qu'elle dit quand tu ne regardes pas

Ouvre la dernière page que tu as mise en production. Regarde la première image. Tu la vois, tu sais ce qu'elle montre, pourquoi elle est là, ce qu'elle apporte au contenu.

Maintenant, ferme les yeux. Qu'est-ce qu'elle dit ?

Si tu as renseigné son texte alternatif, elle dit exactement ce que tu as écrit. Si tu as laissé l'attribut vide, elle ne dit rien. Le lecteur d'écran l'ignore. Si tu n'as pas mis d'attribut du tout, elle dit son chemin vers le fichier. "IMG_4872.jpg". Et si tu l'as rempli pour le référencement, elle récite une liste de mots-clés qui ne décrit rien.

Une image sur le web a deux vies. Celle qu'on voit, et celle qu'on lit. La plupart du temps, personne ne s'occupe de la deuxième.

Cet article va te montrer comment écrire la deuxième vie de tes images. Pour qu'elles disent la même chose à tout le monde.

Quatre images, quatre traitements

Toutes les images ne se valent pas, et toutes n'ont pas besoin du même traitement. La première question à te poser face à une image n'est pas "qu'est-ce que j'écris dans l'alt ?" C'est "est-ce que cette image apporte une information ?"

Image décorative petite : sers-la en CSS

Un motif de fond, une bordure graphique, une icône purement esthétique. Si l'image n'apporte aucune information, elle n'a pas sa place dans le HTML. Sers-la en CSS via background-image ou un pseudo-element. Le lecteur d'écran l'ignore nativement, pas besoin de gérer l'alt.

Image décorative grande : alt=""

Un hero, une photo d'ambiance pleine largeur. Si c'est le plus grand élément visible à l'écran, c'est ton LCP. Le critère de performance qui mesure le temps d'affichage du plus gros élément. Une image CSS est découverte plus tard dans le chargement qu'une balise <img>, ce qui pénalise ton score de performance. On la sert donc en HTML avec un alt vide :

<img src="hero-bg.jpg" alt="" loading="eager">

alt="" n'est pas la même chose qu'un alt absent. alt="" dit au lecteur d'écran : "cette image est décorative, ignore-la." Un alt absent dit : "personne n'a pensé à cette image", et le lecteur d'écran annonce le chemin et le nom du fichier.

Image informative simple : décris l'intention, pas l'image

Un logo cliquable, une photo de profil, une illustration qui accompagne un propos. L'alt ne décrit pas ce que l'image montre, il décrit ce qu'elle apporte dans son contexte.

<a href="/">
  <img src="logo.svg" alt="Accueil — Bariafuri"  loading="eager">
</a>

Le logo montre le symbole de Bariafuri. Mais ce qui compte pour l'utilisateur qui ne le voit pas, c'est que ce lien ramène à l'accueil. L'alt décrit la destination, pas l'image.

Image complexe : <figure> + <figcaption>(par exemple) + description étendue

Un graphique, une infographie, une capture d'écran annotée. L'information est trop riche pour tenir dans un alt de quelques mots. On utilise une structure en deux niveaux :

<figure>
  <img
    src="chart-sales-q1.png"
    alt="Évolution des ventes Q1 2026 par région"
    aria-describedby="chart-data"
    loading="lazy"
  >
  <figcaption>
    Ventes Q1 2026 — croissance portée par l'Europe.
  </figcaption>
</figure>
 
<details>
  <summary>Description détaillée du graphique</summary>
  <p id="chart-data">Les ventes ont progressé de 23% en Europe,
     12% en Amérique du Nord et 8% en Asie-Pacifique.
     L'Europe représente désormais 45% du chiffre
     d'affaires total, contre 38% au Q1 2025.</p>
</details>

L'alt donne le sujet du graphique. Le <figcaption> donne le contexte éditorial — ce n'est pas une duplication de l'alt, c'est un complément. Et le <details> contient la description complète des données, accessible à tous : lecteurs d'écran, moteurs de recherche, LLM, et utilisateurs quand l'image ne charge pas. Détail qui compte : l'aria-describedby vise le <p> à l'intérieur du <details>, pas le <details> entier. Sinon la description embarquerait le texte du <summary>, et l'exposition d'un contenu replié varie d'un lecteur d'écran à l'autre. Ici j'ai utilisé une balise figure avec une balise figcaption, mais tu as le choix d'utiliser d'autres balises. Tout dépend du contexte.

Décrire ce qu'on ne voit pas

Rédiger un bon texte alternatif, ce n'est pas décrire une image. C'est répondre à une question : qu'est-ce que cette image apporte ici que le texte autour ne dit pas déjà ?

Si l'image illustre un propos déjà explicite dans le paragraphe, elle est probablement décorative : alt="". Si elle apporte une information nouvelle (un résultat, une démonstration, une preuve), alors le texte alternatif doit porter cette information.

Quelques exemples concrets :

• Avant : alt="Photo de Yoann Fortin assis à un bureau devant un écran d'ordinateur avec une plante verte à côté"
• Après : alt=""

Le nom est déjà dans le texte autour. Titre de section, paragraphe de présentation. La photo illustre une personne déjà identifiée. Répéter son nom dans l'alt crée une redondance pour le lecteur d'écran. L'image est décorative dans ce contexte.

• Avant : alt="Capture d'écran"
• Après : alt="Le bouton Valider est masqué par le pied de page en vue mobile"

"Capture d'écran" ne dit rien. L'information, c'est le bug. C'est ça que le texte alternatif doit porter.

• Avant : alt="Icône de poubelle"
• Après : alt=""

Le bouton dit déjà "Supprimer". L'icône est décorative, elle renforce visuellement un label qui existe déjà. La décrire en plus crée une redondance pour le lecteur d'écran : "Icône de poubelle, Supprimer".

La règle tient en une phrase : le texte alternatif ne décrit pas ce que l'image montre, il porte ce que l'image dit.

Pense au menu d'un restaurant. Un bon plat sur la carte, ce n'est pas la liste de ses ingrédients, c'est une phrase qui te donne envie de le commander et qui te prévient si tu ne peux pas le manger. Le texte alternatif, c'est cette phrase.

Sources

• Rapport WebAIM Million 2026
• Stevie Wonder on Apple's accessibility (2011)
• BroadbandSearch — Internet statistics
• Google Spam Policies — Cloaking
• 24 jours de web — Accessibilité versus SEO