Images

Critère 1.1Chaque image porteuse d’information a-t-elle une alternative textuelle ?

Ce que ça vérifie — Toute image porteuse d'information (balise <img>, élément avec role="img", <input type="image">, zone cliquable) doit avoir une alternative textuelle restituée aux technologies d'assistance.

Comment corriger — Ajoutez un attribut alt qui transmet l'information ou la fonction de l'image (pas sa description physique). Pour un SVG informatif, utilisez role="img" avec aria-label ou une balise <title>.

<!-- Image informative -->
<img src="ventes-t4.png" alt="Ventes en hausse de 30 % au 4e trimestre 2025" />

<!-- Image cliquable : l'alternative décrit la destination -->
<a href="/"><img src="logo.svg" alt="Neodyr, retour à l'accueil" /></a>

<!-- SVG informatif -->
<svg role="img" aria-label="Taux de conformité : 100 %">…</svg>

Critère 1.2Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?

Ce que ça vérifie — Les images purement décoratives (ornements, illustrations sans information) doivent être ignorées par les lecteurs d'écran, pour ne pas encombrer la lecture.

Comment corriger — Mettez une alternative vide alt="" sur une <img> décorative, ou aria-hidden="true" sur une icône/SVG décoratif, ou déclarez l'image en fond CSS (background-image).

<!-- Image décorative en HTML -->
<img src="separateur.png" alt="" />

<!-- Icône décorative (le sens vient du texte à côté) -->
<button><svg aria-hidden="true">…</svg> Envoyer</button>

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

Ce que ça vérifie — L'alternative d'une image informative doit être pertinente : elle transmet la même information que l'image, sans être vide, générique (« image », « photo ») ni égale au nom du fichier.

Comment corriger — Rédigez une alternative concise et fidèle au message de l'image. Demandez-vous : « si je remplace l'image par ce texte, l'information est-elle préservée ? »

<!-- À éviter -->
<img src="IMG_2043.jpg" alt="IMG_2043.jpg" />

<!-- Pertinent -->
<img src="IMG_2043.jpg" alt="Auditrice testant un site au lecteur d'écran" />

Critère 1.4Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ?

Ce que ça vérifie — Une image utilisée comme CAPTCHA (test anti-robot) doit avoir une alternative qui indique sa nature et sa fonction — sans en révéler la solution.

Comment corriger — Donnez une alternative décrivant qu'il s'agit d'un test de sécurité, pas le contenu à recopier.

<img src="captcha.png"
     alt="Test de sécurité : recopiez dans le champ les caractères affichés" />

Critère 1.5Pour chaque image utilisée comme CAPTCHA, une solution d’accès alternatif au contenu ou à la fonction du CAPTCHA est-elle présente ?

Ce que ça vérifie — Un CAPTCHA doit proposer au moins une autre modalité d'accès (par exemple une version audio) pour ne pas exclure les personnes qui ne peuvent pas voir l'image.

Comment corriger — Proposez une alternative non visuelle (CAPTCHA audio) ou une méthode anti-robot accessible (question logique, honeypot invisible).

<img src="captcha.png" alt="Test de sécurité : recopiez les caractères" />
<button type="button">Écouter une version audio du test</button>

Critère 1.6Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?

Ce que ça vérifie — Les images complexes porteuses d'une information riche (graphiques, schémas, cartes) doivent, si l'alternative courte ne suffit pas, disposer d'une description détaillée accessible.

Comment corriger — Fournissez une description longue à proximité de l'image, reliée par aria-describedby, ou via un lien vers un texte équivalent.

<img src="pipeline.png" alt="Processus d'audit en 4 étapes"
     aria-describedby="desc-pipeline" />
<div id="desc-pipeline">
  Étape 1, cadrage : périmètre et échantillon. Étape 2, audit des 106 critères…
</div>

Critère 1.7Pour chaque image porteuse d’information ayant une description détaillée, cette description est-elle pertinente ?

Ce que ça vérifie — Quand une image complexe a une description détaillée, celle-ci doit être pertinente : elle restitue toutes les informations et relations portées par l'image (données d'un graphique, étapes d'un schéma…).

Comment corriger — Vérifiez que la description couvre l'ensemble du contenu de l'image : valeurs, tendances, légendes, relations — pas seulement un résumé vague.

Critère 1.8Chaque image texte porteuse d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?

Ce que ça vérifie — Une image de texte (texte affiché sous forme d'image) doit, sauf cas particuliers comme les logos, être remplacée par du vrai texte mis en forme via CSS — plus lisible, zoomable et sélectionnable.

Comment corriger — Remplacez l'image de texte par du texte HTML stylé en CSS (police, couleur, ombre, dégradé). Réservez l'image de texte aux logos et cas où la présentation ne peut pas être reproduite.

<!-- À éviter : texte dans une image -->
<img src="promo-soldes.png" alt="Soldes jusqu'à -50 %" />

<!-- Préférable : texte réel stylé -->
<p class="promo">Soldes jusqu'à <strong>-50 %</strong></p>

Critère 1.9Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?

Ce que ça vérifie — Quand une image possède une légende visible, celle-ci doit être correctement associée à l'image dans le code, pour que le lien entre les deux soit explicite.

Comment corriger — Utilisez <figure> pour regrouper l'image et sa légende <figcaption>.

<figure>
  <img src="grille-rgaa.png" alt="Grille des 106 critères, 100 % conforme" />
  <figcaption>Figure 1 — Résultat de l'audit de neodyr.com</figcaption>
</figure>