Image de décoration

Une image de décoration est une image qui n'apporte aucune information au contenu de la page. En HTML, elle reçoit un attribut alt vide (alt="") pour que les lecteurs d'écran l'ignorent. Sans cet attribut, le lecteur d'écran lit le nom du fichier à la place.

Supprimez une image de votre page. Si aucune information ne disparaît, c'est une image de décoration.

#Que faire en HTML

Le tutoriel du W3C liste quatre cas : éléments de mise en page (bordures, séparateurs, coins), visuels qui doublent un texte de lien, illustrations redondantes avec le texte adjacent, et images déjà décrites par le contenu environnant.

Le traitement tient en un attribut :

<!-- Correct : le lecteur d'écran ignore l'image -->
<img src="filet-orange.svg" alt="">
 
<!-- Incorrect : le lecteur d'écran lit « filet-orange.svg » -->
<img src="filet-orange.svg">

role="presentation" et role="none" produisent le même résultat, mais alt="" reste la technique recommandée par les WCAG. Pour un SVG en ligne, ajoutez aria-hidden="true" avec focusable="false". Pour du pur décor (motif, texture, séparateur), préférez background-image en CSS : l'image sort du DOM et devient invisible aux technologies d'assistance.

#Décorative ou informative ? Le contexte décide

La même photo change de statut selon la page. Un paysage de montagne en héro d'un blog voyage ? Décoratif si le texte décrit déjà la destination. Informatif si c'est la seule indication du lieu. L'arbre décisionnel du W3C résume le test : retirer l'image change la compréhension ? Non → décorative. Oui → informative.

Un piège que peu de gens connaissent : le RGAA (critère 1.2) invalide une image de décoration qui porte un attribut title. Même avec alt="", un title="Jolie bordure" crée un nom accessible et fait parler l'image. La communauté RGAA confirme la solution : supprimer le title, ou ajouter aria-hidden="true".

#Erreurs courantes

alt absent vs alt vide. Sans attribut alt, la plupart des lecteurs d'écran tentent de lire le nom du fichier. Vous obtenez « IMG underscore 20250114 underscore crop underscore final underscore v2 dot jpg ». Avec alt="", silence. La différence est brutale.

alt="image décorative". Les lecteurs d'écran annoncent déjà « image » avant le contenu du alt. Résultat : « image, image décorative ». Du bruit pour rien.

#En résumé

Si retirer l'image ne change rien à votre page, c'est de la décoration. Donnez-lui alt="", supprimez tout title, et passez à autre chose. Pour du pur décor, background-image en CSS règle le problème à la source.

Retour au glossaire

Partagez cet article

Pour aller plus loin

Image porteuse d'information

Une image porteuse d'information est une image dont le retrait ferait perdre du sens à la page. Elle transmet un contenu que le texte environnant ne fournit pas. Le RGAA et les WCAG exigent qu'elle porte une alternative textuelle décrivant l'information véhiculée, pas l'apparence de l'image.

Attribut alt

L'attribut alt est l'attribut HTML de la balise <img> qui contient le texte alternatif d'une image. Les lecteurs d'écran lisent ce texte à la place de l'image, et les navigateurs l'affichent quand l'image ne se charge pas. Trois états possibles : absent, vide ou rempli — chacun produit un comportement différent.

Alternative textuelle

L'alternative textuelle est le texte qu'un lecteur d'écran lit à la place d'une image. En HTML, c'est l'attribut alt sur les images. Son contenu dépend du rôle de l'image dans la page : informative, décorative ou fonctionnelle.