WCAG A Votre équipe Facile

Quand une image a une description, cette description dit-elle vraiment ce que l'image apporte comme information ?

Critère officiel 1.3 — Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?

Pourquoi c'est important

Une description vague comme « photo » ou un nom de fichier est aussi inutile que l'absence de description. La personne aveugle ne peut toujours pas comprendre ce que l'image communique, même si techniquement une description existe.

Exemples concrets

Ce qui est conforme

La photo du conseil municipal en séance est décrite : « Réunion du conseil municipal du 14 octobre 2024 — vote du budget primitif. Seize conseillers sont présents autour de la table. » La personne aveugle comprend le contexte sans voir la photo.

Ce qui pose problème

La même photo du conseil municipal est décrite par le nom du fichier : « DSC_0047.jpg ». Le logiciel de lecture lit ce nom, qui n'apporte aucune information sur l'événement ou les personnes représentées.

Comment agir

Demandez-vous : si je ne pouvais pas voir l'image, de quelle information aurais-je besoin pour comprendre ce passage de la page ? C'est cela que doit contenir la description. Pour un graphique, résumez les données clés en une ou deux phrases.

Règles clés

  • L'alt répond à : 'Quelle information perdrait-on si cette image disparaissait ?'
  • Pour un graphique : résumer le message clé, pas la description visuelle.
  • Pour une image dans un lien : décrire la destination, pas l'image.
  • Si le texte adjacent dit déjà tout : alt="" (l'image devient décorative dans ce contexte).

Erreurs fréquentes

  • alt="image" ou alt="photo" — générique, sans information
  • alt décrivant l'apparence ('graphique circulaire bleu') plutôt que l'information ('60% France, 40% export')
  • alt qui répète mot pour mot le texte adjacent — redondance inutile
  • alt surchargé avec toutes les données d'un graphique complexe ('22% préfèrent le vert, 18% préfèrent le rouge...') — créer un tableau HTML séparé et traiter le graphique comme décoratif

Exemples de code

alt générique sur graphique

✗ Non conforme
<img src="graphique-ventes.png" alt="Graphique">

'Graphique' n'informe pas sur le contenu. L'utilisateur sait qu'il y a un graphique, pas ce qu'il représente.

alt informatif sur graphique

✓ Conforme
<img src="graphique-ventes.png"
  alt="Évolution des ventes 2022–2024 :
  +15% en 2022, +22% en 2023, +30% en 2024">

L'alt transmet le message clé. Si les données sont complexes, compléter avec une description détaillée (critère 1.6) ou un tableau adjacent.

Référence WCAG : 1.1.1, 4.1.2

La lettre de l'Atelier A11Y

Ressources pédagogiques, critères RGAA commentés et retours de terrain : une lettre mensuelle pour progresser sur l'accessibilité numérique, sans jargon.

  • Nouveaux articles et ressources pédagogiques
  • Critères RGAA décortiqués avec des exemples concrets
  • Bonnes pratiques et retours d'expérience terrain
S'abonner à la newsletter (s'ouvre dans un nouvel onglet)

Gratuit. Désabonnement possible à tout moment.