Une image juste là pour faire joli ?
Pas d’info, pas d’action, pas de sens ? Ne la décrivez pas. Mettez alt="". Et passez à l’essentiel.
<!-- ✅ Image décorative : alt vide -->
<img src="wave-decoration.svg" alt="" />
<!-- ❌ Image décorative : alt inutile -->
<img src="wave-decoration.svg" alt="vague décorative bleue" />Parce qu’un lecteur d’écran qui lit “texture violette, flèche artistique, vague esthético-floue” pour une image qui ne sert à rien, ce n’est pas de l’accessibilité. C’est un podcast sur la décoration.
Ne rien dire, c’est souvent ce qu’il y a de plus pertinent
Chaque alt inutile est du bruit pour l’utilisateur de lecteur d’écran. C’est comme si quelqu’un te tapait sur l’épaule toutes les 3 secondes pour te montrer un truc qui n’a aucun intérêt.
Le temps d’attention est limité. L’énergie cognitive aussi. Chaque mot qu’un lecteur d’écran prononce doit servir.
Le résumé express
| Situation | Quoi faire |
|---|---|
| Image utile (photo produit, schéma, graphique) | alt="description utile" |
| Image décorative (ornement, séparateur, ambiance) | alt="" |
Image sans attribut alt du tout | Interdit. Le lecteur d’écran lira le nom du fichier : banniere_new_test-copie.jpg |
En pratique
<!-- Photo produit → décrire ce qu'on voit d'utile -->
<img src="sneakers-red.jpg" alt="Baskets rouges modèle Runner, vue de profil" />
<!-- Icône décorative à côté d'un texte → masquer -->
<img src="icon-check.svg" alt="" />
<span>Commande confirmée</span>
<!-- Logo dans un lien → décrire la destination, pas le visuel -->
<a href="/">
<img src="logo.svg" alt="Accueil" />
</a>
<!-- Avatar décoratif → masquer si le nom est déjà affiché -->
<img src="avatar-johan.jpg" alt="" />
<span>Johan Naudin</span>SVG : la même logique
Pour les SVG inline décoratifs, on utilise aria-hidden="true" au lieu de alt="" :
<!-- SVG décoratif → masquer -->
<svg aria-hidden="true" focusable="false">
<use href="#icon-arrow" />
</svg>
<!-- SVG informatif → nommer -->
<svg role="img" aria-label="Progression : 75%">
<!-- ... -->
</svg>Les critères RGAA concernés
- 1.1 — Chaque image porteuse d’information a-t-elle une alternative textuelle ?
- 1.2 — Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Le critère 1.2 vérifie exactement ça : que les images décoratives ont bien alt="" (ou aria-hidden="true" pour les SVG). Un alt="image décorative" est un échec de ce critère.
Accessibilité ≠ tout décrire. Accessibilité = dire ce qui compte au bon moment.