Le thème 1 du RGAA est consacré aux images. Les alternatives textuelles y occupent une place centrale, mais « mettre un alt partout » est un mauvais raccourci : la solution dépend de la nature de l'image, de sa fonction et de la façon dont elle est intégrée.

Ce que le critère 1.1 demande, et ce qu'il ne demande pas

Le critère 1.1 demande que chaque image porteuse d'information ait une alternative textuelle. Selon la technologie, cette alternative peut provenir d'un attribut alt, d'un nom accessible ou d'un contenu de remplacement : le critère ne se limite donc pas à vérifier un attribut HTML. Le critère 1.3 examine ensuite la pertinence de cette alternative, hors cas particuliers.

Un outil sait repérer automatiquement de nombreux défauts : un attribut manquant, un nom de fichier utilisé comme alternative ou un SVG dépourvu de nom accessible. En revanche, déterminer si une image est informative, décorative, un CAPTCHA ou une image-test, puis juger si son alternative restitue la bonne information, dépend du contexte. Une IA peut assister cette analyse, mais la conclusion de conformité nécessite une validation humaine.

Conséquence pratique : l'absence d'alertes automatiques sur le thème 1 ne signifie pas que toutes les images sont conformes. Elle signifie seulement que les défauts recherchés automatiquement n'ont pas été détectés.

La première question : décorative ou informative

Avant d'écrire quoi que ce soit, identifiez la fonction de l'image dans son contexte. Retirez-la mentalement : l'utilisateur perd-il une information, une fonction ou une indication qui n'est pas déjà fournie de façon équivalente ? Les CAPTCHA et images-tests constituent un cas distinct.

  • Non : l'image est décorative. Pour un élément HTML img, utilisez notamment un attribut alt présent mais vide.
  • Oui : l'image est porteuse d'information. Elle doit disposer d'une alternative qui restitue cette information selon la technologie employée.

Un attribut absent et un attribut vide ne produisent pas le même résultat. Pour un élément img décoratif, alt="" permet aux technologies d'assistance de l'ignorer. Sans attribut alt, le nom du fichier peut notamment être restitué à la place.

- <img src="separateur-decoratif.png">+ <img src="separateur-decoratif.png" alt="">

Une image décorative se neutralise, elle ne se laisse pas sans attribut.

Une image décorative peut être posée en CSS sans alternative. En revanche, si une image de fond CSS porte une information, une information équivalente doit rester disponible, y compris lorsque les images de fond ou les styles sont désactivés. Le RGAA accepte notamment qu'un texte masqué fournisse cette équivalence.

Écrire une alternative qui sert à quelque chose

Une bonne alternative se juge à l'oreille. Lisez la page à voix haute en remplaçant chaque image par son texte : si la phrase reste fluide et complète, c'est gagné.

  • Décrivez la fonction, pas le fichier. Ce qui compte est le rôle de l'image dans la page, pas son contenu pixel par pixel.
  • Restez aussi concis que le permet l'information. Une image complexe peut nécessiter une description détaillée en plus d'une alternative courte.
  • Ne répétez pas le texte voisin. Si la légende dit déjà tout, l'image devient décorative.
  • Ne commencez pas par « Image de » ou « Photo de ». Le lecteur d'écran annonce déjà qu'il s'agit d'une image.
  • Écrivez naturellement. La ponctuation peut améliorer la restitution vocale, sans constituer à elle seule une exigence de conformité.
- <img src="equipe-2026.jpg" alt="equipe-2026">- <img src="equipe-2026.jpg" alt="Photo de notre super équipe">+ <img src="equipe-2026.jpg" alt="Les huit consultants de l'agence réunis en atelier.">

Les cinq cas qui font trébucher

L'image utilisée comme lien ou comme bouton

Quand l'image est le seul contenu d'un lien, son alternative fournit généralement l'intitulé du lien. L'intitulé, seul ou avec son contexte selon le test applicable, doit permettre d'en comprendre la fonction et la destination. « Voir mon panier » sera souvent plus explicite que « panier ».

- <a href="/panier"><img src="cart.svg" alt="panier"></a>+ <a href="/panier"><img src="cart.svg" alt="Voir mon panier"></a>

Attention au cas inverse : si le lien contient déjà du texte visible à côté de l'icône, l'icône devient décorative et son alternative doit être vide, sinon l'intitulé est annoncé deux fois.

L'image de texte

Le référentiel traite les images contenant du texte comme un cas particulier, et il demande d'abord de s'en passer : du vrai texte stylé en CSS reste redimensionnable, sélectionnable et lisible par tous les outils. Quand l'image de texte est inévitable, par exemple pour un logotype, l'alternative reprend le texte à l'identique, sans le reformuler.

Le graphique et l'infographie

Une alternative courte ne peut pas restituer un graphique. Le RGAA prévoit deux niveaux : une alternative brève qui annonce la nature du contenu, et une description détaillée qui en donne la substance. Cette description peut être un paragraphe adjacent, un tableau de données, ou une page dédiée liée depuis le visuel. L'important est qu'elle soit accessible à tous, pas cachée dans un attribut que les navigateurs n'exposent plus.

Le SVG intégré au HTML

Un SVG intégré directement dans le balisage n'a pas d'attribut alt. S'il porte de l'information, il doit disposer d'une alternative ou d'un nom accessible pertinent, par exemple avec role="img" et aria-labelledby. S'il est décoratif, il peut être masqué aux technologies d'assistance ; focusable="false" évite aussi une focalisation indésirable dans certains environnements anciens.

- <svg viewBox="0 0 24 24"><path d="..."/></svg>+ <svg viewBox="0 0 24 24" role="img" aria-labelledby="svg-conf">+   <title id="svg-conf">Progression du taux de conformité</title>+   <path d="..."/>+ </svg>   // variante décorative :+ <svg aria-hidden="true" focusable="false">...</svg>

Le test de sécurité visuel

Un CAPTCHA en image doit au minimum indiquer sa nature dans son alternative, et une solution de remplacement doit exister pour ceux qui ne peuvent pas le résoudre. Reproduire la réponse dans l'alternative n'est évidemment pas une option.

Ce qu'un scan détecte, et ce qui reste à faire à la main

Sur le thème des images, un contrôle automatisé peut identifier des attributs manquants, des liens image sans nom accessible, des alternatives ressemblant à un nom de fichier ou des SVG sans nom accessible. Les alternatives identiques répétées et les formulations vagues sont plutôt des signaux à examiner : elles ne constituent pas automatiquement une non-conformité.

C'est là qu'une analyse par IA change la donne, et c'est précisément ce que fait Critera sur le thème des images. Plutôt que de se contenter de vérifier qu'un attribut existe, l'outil examine chaque visuel : il classe l'image en décorative ou informative, signale les alternatives vagues ou hors sujet, repère les images de fond qui portent de l'information, et propose pour chacune une suggestion d'alternative que vous n'avez plus qu'à relire. Vous n'auditez pas à l'aveugle : vous partez d'un premier jet argumenté, image par image.

La décision finale vous revient. Une IA propose et priorise, mais valider qu'une alternative restitue fidèlement la fonction de l'image, ou qu'une description détaillée est suffisante, reste un jugement humain. Cette préparation peut accélérer la relecture, sans transformer la suggestion en preuve de conformité.

La passe de relecture, en quatre gestes

  • Listez toutes les images de la page et tranchez décorative ou informative, une par une.
  • Vérifiez que chaque type d'image dispose du traitement attendu : alt, nom accessible, contenu de remplacement ou masquage approprié.
  • Relisez la page en remplaçant chaque image par son alternative, à voix haute.
  • Pour chaque graphique, vérifiez qu'une description détaillée existe et qu'elle est atteignable.

La mutualisation des composants évite de répéter certaines corrections techniques, mais chaque nouveau contenu éditorial doit encore être qualifié et relu dans son contexte.

Sources officielles