Images décoratives : Quand et comment utiliser alt="" ?

L'attribut alt des images est un pilier de l'accessibilité web. Mais contrairement à une idée reçue, toutes les images ne nécessitent pas une description textuelle. Certaines images, dites décoratives, doivent au contraire être rendues invisibles aux technologies d'assistance.

Qu'est-ce qu'une image décorative ?

Une image est considérée comme décorative lorsqu'elle n'apporte aucune information nécessaire à la compréhension du contenu. Elle est présente uniquement pour l'esthétique ou la mise en page.

Exemples d'images décoratives

• Icônes purement visuelles accompagnées d'un texte explicite
• Images d'ambiance qui illustrent sans informer
• Séparateurs graphiques entre sections
• Fonds texturés ou motifs visuels
• Bordures et coins décoratifs de mise en page

Le test décisif

Posez-vous cette question : si je décrivais cette page par téléphone à quelqu'un, mentionnerais-je cette image ?

Si la réponse est non, l'image est probablement décorative.

Comment implémenter alt="" correctement

La syntaxe de base

<!-- Image décorative : alt vide obligatoire -->
<img src="decoration.png" alt="">

<!-- JAMAIS sans attribut alt ! -->
<img src="decoration.png"> <!-- INCORRECT -->

Alternative avec ARIA

Pour plus de clarté sémantique, vous pouvez combiner avec role="presentation" :

<img src="decoration.png" alt="" role="presentation">

Ou utiliser aria-hidden :

<img src="decoration.png" alt="" aria-hidden="true">

La meilleure solution : CSS

Dans l'idéal, les images purement décoratives devraient être implémentées via CSS plutôt qu'en HTML :

.section-decorative {
  background-image: url('decoration.png');
  background-repeat: no-repeat;
}

Cette approche sépare clairement le contenu (HTML) de la présentation (CSS).

L'arbre de décision du W3C

Le W3C propose un arbre de décision pour déterminer le traitement de chaque image :

1. L'image contient-elle du texte ? → Reproduire ce texte dans l'alt
2. L'image est-elle un lien ou un bouton ? → Décrire la destination ou l'action
3. L'image apporte-t-elle une information ? → Décrire cette information
4. L'information est-elle déjà présente dans le texte adjacent ? → Utiliser alt=""
5. L'image est-elle purement décorative ? → Utiliser alt=""

Cas pratiques et pièges courants

Cas 1 : L'icône avec texte

<!-- CORRECT : l'icône est décorative car le texte suffit -->
<button>
  <img src="poubelle.svg" alt="">
  Supprimer
</button>

<!-- INCORRECT : sans texte, l'icône doit être décrite -->
<button>
  <img src="poubelle.svg" alt="">
</button>

Cas 2 : L'image d'illustration

<!-- Photo décorative illustrant un article -->
<article>
  <img src="bureau-moderne.jpg" alt="">
  <h2>Comment aménager son espace de travail</h2>
  <p>L'ergonomie de votre bureau impacte votre productivité...</p>
</article>

Cette photo d'ambiance n'apporte pas d'information supplémentaire au contenu de l'article.

Cas 3 : Le logo en lien

<!-- INCORRECT : un logo-lien n'est pas decoratif -->
<a href="/">
  <img src="logo.png" alt=""> <!-- ERREUR -->
</a>

<!-- CORRECT : décrire la destination -->
<a href="/">
  <img src="logo.png" alt="RGAA Checker - Accueil">
</a>

Impact sur les lecteurs d'écran

Voici ce qu'entend un utilisateur de lecteur d'écran selon l'implémentation :

Vérifier vos images décoratives

Outils recommandés

1. Extension WAVE : signale les images avec alt vide pour vérification manuelle
2. axe DevTools : détecte les problèmes d'alternatives textuelles
3. Inspecteur du navigateur : vérifiez l'attribut alt dans le code source

Audit manuel

Parcourez votre site avec un lecteur d'écran (NVDA, VoiceOver) et vérifiez que :

• Les images décoratives ne sont pas annoncées
• Les images informatives sont correctement décrites

Conclusion

Identifier correctement les images décoratives est essentiel pour une accessibilité optimale. Un alt mal renseigné crée du bruit pour les utilisateurs de technologies d'assistance, tandis qu'un alt="" bien placé leur permet de se concentrer sur le contenu important.

Pour approfondir, consultez notre guide complet sur les alternatives textuelles et notre article sur l'IA et les descriptions d'images.