Chaque image porteuse d’information a-t-elle une alternative textuelle ?
Un lecteur d’écran face à une image sans alternative annonce le nom du fichier brut : « graphique tiret ventes tiret q3 tiret 2025 point png ». Aucune information utile ne passe. Pour 18,5 % des images de pages d’accueil (WebAIM Million 2025), c’est exactement ce qui se produit.
Ce critère ne concerne que les images porteuses d’information — celles qui, disparaissant, font perdre quelque chose au visiteur. Un graphique de résultats, une photo de produit sur une fiche, un bouton de soumission avec une icône : chacun doit porter une alternative. L’image décorative, elle, doit avoir un alt vide (voir critère 1.2).
Huit types d’éléments sont couverts : <img>, les éléments avec role="img", les zones <area>, les boutons <input type="image">, les images serveur (ismap), les <svg>, les <object> et <embed> de type image, et les <canvas>. Chaque type accepte des mécanismes d’alternative spécifiques : alt, aria-label, aria-labelledby, ou <title> pour les SVG.
Pas d’alternative, pas d’information.
8 tests pour vérifier la présence d'alternatives textuelles sur les images
Images <img> et éléments role="img"
- Repérez tous les
<img>et tous les éléments portantrole="img"dans la page. - Pour chaque élément, décidez s’il transmet une information (si l’image disparaissait, perdrait-on quelque chose ?).
- Pour un
<img>informatif : vérifiez qu’au moins un de ces attributs est présent et non vide :aria-labelledby,aria-label,alt,title. - Pour un élément avec
role="img": vérifiez qu’au moins un de ces attributs est présent et non vide :aria-labelledbyouaria-label. Note :altettitlene sont pas acceptés pour ce cas. - Au moins une alternative trouvée → test validé. Aucune alternative → test échoue.
Zones réactives <area>
- Repérez tous les éléments
<area>dans la page (zones cliquables d’une image map). - Pour chaque
<area>, déterminez si la zone transmet une information utile. - Vérifiez qu’au moins un de ces attributs est présent et renseigné :
aria-labeloualt. - Au moins une alternative trouvée → test validé. Aucune alternative → test échoue.
Boutons-images <input type="image">
- Repérez tous les
<input type="image">dans la page. - Pour chaque élément, déterminez si l’image est porteuse d’information.
- Vérifiez qu’au moins un de ces attributs est présent et renseigné :
aria-labelledby,aria-label,alt,title. - Au moins une alternative trouvée → test validé. Aucune alternative → test échoue.
Note : l’alternative doit décrire la fonction du bouton, pas l’apparence de l’icône.
Images-liens serveur <img ismap>
- Repérez tous les
<img ismap>dans la page (images-liens côté serveur). - Pour chaque image, vérifiez qu’une alternative textuelle permet d’accéder aux mêmes ressources : un lien ou un ensemble de liens, ou un composant équivalent (liste de sélection, etc.).
- Alternative présente → test validé. Pas d’alternative → test échoue.
SVG inline <svg>
- Repérez tous les
<svg>dans la page. - Pour chaque
<svg>, déterminez s’il transmet une information. - Vérifiez que le
<svg>porte l’attributrole="img". Sans cet attribut → test échoue directement, même si une alternative est présente. - Si
role="img"est présent, vérifiez qu’au moins une de ces alternatives est renseignée : un élément<title>enfant,aria-labelledbypointant vers un texte existant, ouaria-labelsur le<svg>. - Au moins une alternative trouvée → test validé. Aucune → test échoue.
Images <object>
- Repérez tous les
<object type="image/...">dans la page. - Pour chaque élément, déterminez si l’image est porteuse d’information.
- Vérifiez la présence de
role="img"sur l’élément<object>. - Vérifiez qu’au moins une de ces alternatives est renseignée :
aria-labelledby,aria-label, outitle→ test validé. - Si aucune alternative ARIA n’est trouvée, vérifiez qu’un lien ou bouton adjacent donne accès au contenu alternatif, ou qu’un mécanisme de remplacement existe → test validé.
- Aucune des conditions satisfaites → test échoue.
Images <embed>
- Repérez tous les
<embed type="image/...">dans la page. - Pour chaque élément, déterminez si l’image est porteuse d’information.
- Vérifiez la présence de
role="img"sur l’élément<embed>. - Vérifiez qu’au moins une de ces alternatives est renseignée :
aria-labelledby,aria-label, outitle→ test validé. - Si aucune alternative ARIA n’est présente, vérifiez qu’un lien ou bouton adjacent donne accès au contenu alternatif, ou qu’un mécanisme de remplacement existe → test validé.
- Aucune des conditions satisfaites → test échoue.
Images <canvas>
- Repérez tous les
<canvas>dans la page. - Pour chaque élément, déterminez si l’image rendue est porteuse d’information.
- Voie principale :
role="img"présent ETaria-labelledbyouaria-labelrenseigné → test validé. - Si
role="img"est absent ou sans alternative ARIA, vérifiez l’une de ces conditions :- Du contenu textuel est présent entre
<canvas>et</canvas>. - Un lien ou bouton adjacent donne accès au contenu alternatif.
- Un mécanisme permet de remplacer le
<canvas>par du contenu alternatif.
- Du contenu textuel est présent entre
- L’une de ces conditions satisfaite → test validé. Aucune → test échoue.
Attention : dès que role="img" est présent, seule la voie principale (étape 3) est recevable. Le contenu entre les balises n’est alors plus suffisant.
Exemples
❌ Non conforme : Image informative sans attribut alt
<img src="evolution-chiffre-affaires-2025.png">L’attribut alt est absent. Le lecteur d’écran annonce le nom du fichier brut « evolution tiret chiffre tiret affaires tiret 2025 point p-n-g » ou simplement « image » selon le navigateur et sa configuration. L’information contenue dans le graphique est totalement inaccessible.
✅ Conforme : Image informative avec alt descriptif et chiffré
<img src="evolution-chiffre-affaires-2025.png" alt="Graphique d’évolution du chiffre d’affaires : +18 % entre janvier et juin 2025, de 2,1 M€ à 2,5 M€">L’alternative transmet le message essentiel du graphique avec les données clés. Un utilisateur de lecteur d’écran obtient la même information qu’un utilisateur voyant, sans avoir à consulter une source externe.
❌ Non conforme : SVG informatif sans role="img"
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" aria-label="Jauge de complétion : 75 %">
<circle cx="100" cy="100" r="80" fill="#e63946"/>
<text x="100" y="110" text-anchor="middle" fill="white" font-size="24">75%</text>
</svg>L’aria-label est présent, mais sans role="img", le SVG n’est pas exposé comme une image aux technologies d’assistance. Le RGAA exige les deux. Test 1.1.5 échoue, même si l’intention est bonne.
✅ Conforme : SVG informatif avec role="img" et aria-label
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"
role="img" aria-label="Jauge de complétion du projet : 75 % atteint">
<circle cx="100" cy="100" r="80" fill="#e63946"/>
<text x="100" y="110" text-anchor="middle" fill="white" font-size="24">75%</text>
</svg>role="img" expose le SVG comme une image aux lecteurs d’écran. L’aria-label fournit une alternative contextualisée. Test 1.1.5 validé.
❌ Non conforme : Bouton-image sans alternative textuelle
<form action="/recherche" method="get">
<label for="q">Rechercher</label>
<input type="text" name="q" id="q">
<input type="image" src="btn-loupe.png">
</form>L’<input type="image"> n’a pas d’attribut alt. Le lecteur d’écran annonce « btn tiret loupe point png ». L’utilisateur ne comprend pas que ce bouton soumet la recherche. Test 1.1.3 échoue.
✅ Conforme : Bouton-image avec alt fonctionnel
<form action="/recherche" method="get">
<label for="q">Rechercher</label>
<input type="text" name="q" id="q">
<input type="image" src="btn-loupe.png" alt="Lancer la recherche">
</form>L’alt décrit la fonction du bouton, pas l’apparence de l’icône. L’utilisateur de lecteur d’écran sait exactement ce que ce bouton fait. Test 1.1.3 validé.
Astuces et pièges
⚠️ alt="image" ou alt="photo" : l’alternative qui n’en est pas une
C’est l’erreur la plus fréquente en audit RGAA. Les lecteurs d’écran annoncent déjà le rôle de l’élément (« image »). Écrire alt="photo de profil" produit l’annonce « image, photo de profil ». Le alt doit décrire ce que l’image montre ou communique, pas son format.
⚠️ SVG avec aria-label mais sans role="img" : test 1.1.5 échoue quand même
Un <svg> sans role="img" ne valide pas le test 1.1.5, même si un aria-label est correctement renseigné. Le rôle est une condition préalable obligatoire : sans lui, le SVG n’est pas exposé comme une image aux technologies d’assistance. Vérifiez toujours les deux attributs ensemble.
⚠️ La même image peut exiger des alternatives différentes selon la page
La photo d’un dirigeant utilisée comme élément décoratif sur la page d’accueil peut avoir alt="". La même photo sur la page « Équipe » est informative et exige un alt avec le nom et la fonction de la personne. L’alternative dépend du rôle de l’image dans son contexte, pas de l’image elle-même.
⚠️ <canvas> avec role="img" : une seule voie d’alternative valide
Dès qu’un <canvas> porte role="img", seuls aria-label et aria-labelledby sont acceptés. Le contenu textuel entre <canvas> et </canvas> n’est plus recevable. C’est une particularité du test 1.1.8 que la documentation officielle mentionne en note, mais que beaucoup ratent en audit.
💡 Pour les boutons-images, décrivez la fonction, jamais l’apparence
Un <input type="image"> avec une icône loupe doit avoir alt="Lancer la recherche", pas alt="Loupe" ni alt="Icône de recherche". Le critère 1.3 vérifiera ensuite la pertinence de cette alternative.
💡 Le test du téléphone pour rédiger un bon alt
Imaginez décrire la page par téléphone à quelqu’un qui ne la voit pas. Ce que vous diriez naturellement pour transmettre le contenu de l’image — c’est le bon alt. Si vous ne diriez rien, l’image est probablement décorative et l’alt doit être vide.
Questions fréquentes
Comment traiter l'attribut alt des images décoratives selon le RGAA ?
L’attribut alt doit toujours être présent sur un <img>, mais sa valeur diffère selon le rôle de l’image. Pour une image informative : alt avec un texte descriptif. Pour une image décorative : alt="" (vide). Si l’attribut est absent, le lecteur d’écran annonce le nom du fichier. Critère 1.2 détaille les règles pour les images décoratives.
Quelle longueur maximale doit avoir un attribut alt conforme au RGAA ?
Le RGAA n’impose pas de limite. En pratique, visez 80 à 100 caractères pour les images simples. Pour un graphique complexe ou une infographie dense, un alt court décrivant le sujet (« Répartition budgétaire 2025, voir description ci-dessous ») peut être complété par une description longue via aria-describedby ou un lien adjacent. Critère 1.6 couvre les images complexes nécessitant une description détaillée.
Comment rendre accessible un SVG inline avec une alternative textuelle RGAA ?
Non, l’attribut alt n’existe pas sur <svg>. Pour un SVG inline informatif, ajoutez role="img" sur la balise <svg>, puis soit un <title> comme premier élément enfant (en pointant dessus avec aria-labelledby), soit directement un aria-label. Le <title> avec aria-labelledby bénéficie du meilleur support parmi les combinaisons navigateur/lecteur d’écran testées.
Pourquoi l'attribut title ne remplace-t-il pas l'alt sur une <img> en RGAA ?
Techniquement oui : le test 1.1.1 accepte title comme mécanisme valide pour <img>. C’est cependant une solution de dernier recours. Le title n’est pas restitué par défaut par tous les lecteurs d’écran selon leur configuration, et il n’est accessible au survol de la souris que pour les utilisateurs voyants. Préférez alt dans tous les cas.
Comment auditer rapidement les images sans alternative textuelle sur une page ?
Depuis la console DevTools : document.querySelectorAll('img:not([alt])') liste les images sans attribut alt. Pour repérer les alt vides sur des images potentiellement informatives : document.querySelectorAll('img[alt=""]'). Includdy signale automatiquement ces cas et les classe par niveau de sévérité.