Toutes les images d’une page web ne se valent pas pour les technologies d’assistance. Une image peut être décorative, informative ou fonctionnelle, et chacune appelle un traitement différent en HTML. Mal classer une image, c’est créer du bruit pour les lecteurs d’écran ou priver les utilisateurs d’une information essentielle.

Cet article fait le tour des principaux cas, avec les bonnes pratiques de code et les critères RGAA concernés.

Image décorative

Une image décorative n’apporte aucune information au contenu. Elle est là pour l’esthétique : ornement, séparateur, icône redondante avec un texte adjacent, image d’ambiance.

Comment la coder

<img> HTML :

<img src="separator.svg" alt="" role="presentation" />

L’attribut alt="" (vide, mais présent) indique aux lecteurs d’écran d’ignorer l’image. Le role="presentation" est facultatif mais explicite l’intention.

SVG inline :

<svg aria-hidden="true" focusable="false">
  <!-- ... -->
</svg>

Pour un SVG, on utilise aria-hidden="true" pour le masquer aux technologies d’assistance, et focusable="false" pour empêcher le focus clavier (utile pour les anciens IE/Edge).

Image d’arrière-plan CSS :

.hero {
  background-image: url('decoration.jpg');
}

Une image en background n’est jamais présentée aux lecteurs d’écran. Elle est donc par défaut décorative. Si tu mets une image porteuse d’information en background CSS, c’est un bug d’accessibilité.

Pièges courants

• ❌ Oublier l’attribut alt : sans alt, certains lecteurs d’écran lisent le nom du fichier (img/icon-arrow-left-v3.svg). Mets toujours alt="" même si l’image est décorative.
• ❌ alt="image décorative" : c’est encore pire, ça verbalise pour rien.
• ❌ SVG décoratif sans aria-hidden : un SVG inline est lu par les lecteurs d’écran s’il contient du texte ou un <title>. Si c’est décoratif, masque-le.

Critères RGAA concernés

• 1.1 — Chaque image porteuse d’information a-t-elle une alternative textuelle ? (NA pour les décoratives)
• 1.2 — Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?

Image informative

Une image informative apporte une information que l’utilisateur doit pouvoir comprendre sans la voir. Photo d’un produit, graphique, capture d’écran, illustration d’un concept.

Comment la coder

Le cas simple :

<img src="capture-erreur.png" alt="Le formulaire affiche un message d'erreur en rouge sous le champ email : 'Adresse invalide'." />

L’alternative textuelle doit décrire l’information transmise, pas l’image elle-même. On ne dit pas “photo d’un écran” mais on retranscrit le contenu utile.

Image complexe (graphique, schéma, infographie)

Pour une image qui ne peut pas être résumée en une phrase (un graphique avec 12 séries, une infographie complète, un schéma technique), une alternative courte ne suffit pas. Il faut une description détaillée.

Trois techniques possibles :

1. Texte adjacent visible

<figure>
  <img src="ventes-2025.png" alt="Évolution du chiffre d'affaires en 2025." />
  <figcaption>
    Le chiffre d'affaires démarre à 120 k€ en janvier, monte progressivement
    jusqu'à un pic de 280 k€ en juin, puis redescend à 180 k€ en décembre.
    La moyenne annuelle est de 195 k€.
  </figcaption>
</figure>

2. Lien vers une page dédiée

<img src="schema-architecture.svg" alt="Architecture du système (description ci-dessous)." />
<a href="/schema-architecture-description">Description détaillée du schéma</a>

3. aria-describedby

<img src="graphique.png" alt="Évolution des ventes." aria-describedby="desc-graphique" />
<div id="desc-graphique">
  Le graphique montre une progression continue du nombre de ventes...
</div>

Critères RGAA concernés

• 1.1 — Alternative textuelle présente
• 1.3 — Alternative pertinente (décrit-elle correctement l’information ?)
• 1.6 — Description détaillée si nécessaire
• 1.7 — Description détaillée pertinente
• 1.9 — Légende correctement reliée à l’image (pour <figure>/<figcaption>)

Image fonctionnelle

Une image fonctionnelle est une image qui sert d’élément d’interaction : icône dans un bouton, logo cliquable qui mène à l’accueil, image-lien vers une page produit. Elle déclenche une action.

C’est souvent là que les erreurs sont les plus fréquentes.

Règle d’or

L’alternative textuelle d’une image fonctionnelle décrit la fonction, pas le visuel.

❌ Mauvais : <a href="/"><img src="logo.svg" alt="Logo de la marque" /></a> ✅ Bon : <a href="/"><img src="logo.svg" alt="Accueil" /></a>

❌ Mauvais : <button><img src="loupe.svg" alt="Loupe" /></button> ✅ Bon : <button><img src="loupe.svg" alt="Rechercher" /></button>

Image avec texte adjacent

Si le bouton ou le lien contient déjà un texte visible qui décrit l’action, l’image doit être marquée comme décorative pour éviter la double lecture :

<button>
  <img src="trash.svg" alt="" />
  Supprimer
</button>

Le lecteur d’écran annoncera “bouton, Supprimer” — propre, sans répétition.

SVG dans un lien ou un bouton

<button aria-label="Fermer">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-close" />
  </svg>
</button>

L’aria-label du bouton porte la fonction. Le SVG est masqué.

Pièges courants

• ❌ alt="cliquez ici" ou alt="lire la suite" : ne décrit pas la destination
• ❌ Lien avec uniquement une image sans alt : le lecteur d’écran lit l’URL ou le nom de fichier, l’utilisateur est perdu
• ❌ Plusieurs liens-image identiques sans contexte : “Voir le produit”, “Voir le produit”, “Voir le produit”… il faut différencier (alt="Voir le produit Chaussures rouges")

Critères RGAA concernés

• 1.1 — L’image fonctionnelle doit avoir une alternative qui décrit sa fonction
• 1.3 — L’alternative est-elle pertinente (décrit-elle bien la fonction) ?
• 6.1 — Chaque lien est-il explicite ?
• 11.9 — L’intitulé du bouton est-il pertinent ?

Cas particulier : l’image texte

Une image texte est une image qui contient du texte, comme un logo avec une typo personnalisée, une bannière promo avec un slogan, un bouton stylé en image.

Règle générale du RGAA : on doit privilégier le texte HTML stylé en CSS plutôt que des images de texte. L’image texte est tolérée pour les logos et les éléments où l’apparence est essentielle (typographie spéciale, marque déposée).

<!-- Acceptable : logo avec typo unique -->
<img src="logo-marque.svg" alt="Marque XYZ" />

<!-- À éviter : un titre en image -->
<img src="titre-promo.png" alt="Soldes d'hiver -50%" />
<!-- Préférer : -->
<h2 class="promo-title">Soldes d'hiver -50%</h2>

Critère RGAA concerné

• 1.8 — Chaque image texte porteuse d’information doit, si possible, être remplacée par du texte stylé.

Récapitulatif

Type	Marquage	alt
Décorative <img>	alt=""	Vide mais présent
Décorative SVG inline	aria-hidden="true"	—
Décorative en CSS	(rien)	—
Informative simple	alt="description courte"	Décrit l’info
Informative complexe	alt="résumé" + <figcaption> ou aria-describedby	Résumé + description longue
Fonctionnelle	alt="fonction"	Décrit l’action, pas le visuel
Fonctionnelle dans lien/bouton avec texte	alt=""	Vide, le texte du lien suffit
Image texte	alt="texte exact"	Reproduit le texte

Comment l’auditer en pratique

Lors d’un audit RGAA, pour chaque image de la page :

1. Demande-toi : est-ce que cette image est cliquable ? Est-ce qu’elle est dans un <a> ou un <button> ?
   • Oui → c’est fonctionnelle : l’alt doit décrire la fonction
2. Sinon, demande-toi : est-ce que cette image apporte une info que je perdrais si elle disparaissait ?
   • Oui → c’est informative : l’alt doit décrire l’info
   • Non → c’est décorative : alt="" ou aria-hidden

L’extension RGAA Lab automatise une partie de ces vérifications : elle détecte le type d’image (fonctionnelle, décorative via aria-hidden, etc.) et pose les bonnes questions à l’auditeur.

Pour aller plus loin

• alt="" est une bonne pratique (si, si) — focus sur les images décoratives
• Note du W3C sur les images dans HTML (en anglais)
• Méthode RGAA — Thématique 1 Images
• Tester avec l’extension