Accessibilité des images : textes alternatifs et bonnes pratiques

Pourquoi les textes alternatifs sont essentiels

Les textes alternatifs (alt) permettent aux personnes utilisant un lecteur d'écran de comprendre le contenu d'une image. C'est l'un des critères les plus fondamentaux du RGAA et le plus fréquemment non respecté.

En France, 12 millions de personnes sont en situation de handicap. Les déficiences visuelles concernent plus de 1,7 million de personnes. Pour elles, les textes alternatifs sont le seul moyen d'accéder au contenu visuel.

Les critères RGAA concernés

La thématique 1 du RGAA couvre 10 critères relatifs aux images :

• Critère 1.1 — Chaque image porteuse d'information a-t-elle une alternative textuelle ?
• Critère 1.2 — Chaque image de décoration est-elle correctement ignorée ?
• Critère 1.3 — L'alternative est-elle pertinente ?
• Critères 1.6-1.7 — Description détaillée pour les images complexes
• Critère 1.8 — Les images texte doivent-elles être remplacées par du texte ?
• Critère 1.9 — Les légendes sont-elles correctement liées ?

Image informative : comment bien rédiger un alt

Une image informative transmet une information nécessaire à la compréhension du contenu.

Bonnes pratiques

• Décrivez la fonction, pas l'apparence : « Logo RGAA Test - Retour à l'accueil » plutôt que « Image violette avec un cercle »
• Soyez concis : 80 à 100 caractères maximum dans la plupart des cas
• N'utilisez pas « Image de... » ou « Photo de... » (le lecteur d'écran annonce déjà « image »)
• Incluez le texte visible dans l'image si c'est une image-texte

<!-- Bon -->
<img src="graph.png" alt="Ventes 2025 : hausse de 15% au T3, 80M€ de CA" />

<!-- Mauvais -->
<img src="graph.png" alt="graphique" />
<img src="graph.png" />

Image décorative : alt vide

Une image purement décorative ne transmet aucune information. Elle doit être ignorée par les lecteurs d'écran.

<!-- Image décorative -->
<img src="ornement.svg" alt="" role="presentation" />

<!-- Icône à côté d'un texte qui la décrit déjà -->
<button>
  <img src="search.svg" alt="" />
  Rechercher
</button>

SVG accessibles

Les SVG inline nécessitent un traitement spécifique pour être accessibles :

<!-- SVG informatif -->
<svg role="img" aria-label="Statistiques mensuelles">
  <title>Statistiques mensuelles</title>
  <!-- contenu SVG -->
</svg>

<!-- SVG décoratif -->
<svg aria-hidden="true" focusable="false">
  <!-- contenu SVG -->
</svg>

Images complexes : description détaillée

Pour les images complexes (graphiques, schémas, infographies), un texte alternatif court ne suffit pas. Il faut fournir une description détaillée :

<figure>
  <img src="organigramme.png"
       alt="Organigramme de l'entreprise (description détaillée ci-dessous)" />
  <figcaption>
    <details>
      <summary>Description détaillée de l'organigramme</summary>
      <p>L'entreprise est dirigée par Marie Dupont (PDG)...</p>
    </details>
  </figcaption>
</figure>

Checklist rapide