Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
Un utilisateur de lecteur d’écran arrive sur votre page et entend « fleche tiret rouge tiret haut point png ». L’alternative est présente, le critère 1.1 est satisfait, mais l’information manque toujours. Alt présent ne suffit pas.
Une alternative est pertinente quand elle transmet la même information que l’image. Si le graphique montre une hausse de 15 % au T3, l’alt mentionne cette hausse. Si le bouton-image soumet un formulaire de contact, l’alt dit « Envoyer le message ». Le test de pertinence se résume à une question : quelqu’un qui n’a pas vu l’image et qui lit l’alternative comprend-il exactement la même chose ?
Le critère couvre neuf types d’éléments : <img> (y compris les éléments avec role="img"), <area>, <input type="image">, <object type="image/...">, <embed type="image/...">, <svg>, et deux cas pour <canvas> (alternative via attributs ARIA, et contenu alternatif entre balises). Le test 1.3.9 ajoute une contrainte de brièveté : une alternative trop longue ralentit la navigation au lecteur d’écran autant qu’une alternative incorrecte.
9 tests pour évaluer la pertinence de chaque alternative textuelle
Pertinence de l'alternative <img> et role="img"
- Repérez tous les éléments
<img>et les éléments avecrole="img"qui possèdent une alternative textuelle (alt,aria-label,aria-labelledby). - Pour chacun, lisez l’alternative et demandez-vous : décrit-elle ce que l’image communique ? Elle ne doit pas être générique (« image », « photo ») ni reprendre le nom du fichier.
- Si toutes les alternatives sont pertinentes, le test est validé.
Pertinence de l'alternative <area>
- Repérez tous les éléments
<area>(zones cliquables d’une image réactive) possédant un attributalt. - Pour chaque
<area>, vérifiez que l’altdécrit la destination ou la fonction de la zone, pas l’image parente. L’alternative doit correspondre à ce que l’utilisateur fera en activant cette zone. - Si toutes les alternatives sont pertinentes, le test est validé.
Pertinence de l'alternative <input type="image">
- Repérez tous les éléments
<input type="image">possédant un attributalt. - Pour chacun, vérifiez que l’
altdécrit l’action du bouton, pas l’image elle-même. Un bouton de validation d’achat doit avoiralt="Valider la commande", pasalt="flèche verte"nialt="bouton". - Si toutes les alternatives sont pertinentes, le test est validé.
Pertinence de l'alternative <object>
- Repérez tous les éléments
<object>avec un attributtypecommençant parimage/(ex :type="image/png") et possédant une alternative textuelle. - Pour chacun, vérifiez que l’alternative décrit le contenu informationnel de l’image, pas son format ou son nom de fichier.
- Si toutes les alternatives sont pertinentes, le test est validé.
Pertinence de l'alternative <embed>
- Repérez tous les éléments
<embed>avectype="image/..."possédant une alternative textuelle. - Pour chacun, vérifiez que l’alternative décrit le contenu informationnel de l’image embarquée.
- Si toutes les alternatives sont pertinentes, le test est validé.
Pertinence de l'alternative <svg>
- Repérez tous les éléments
<svg>porteurs d’information avec une alternative textuelle (via<title>,aria-labelouaria-labelledby). - Pour chacun, vérifiez que l’alternative transmet le même contenu que le SVG. Un pictogramme téléphone dans un lien doit avoir « Nous appeler », pas « icône ».
- Si toutes les alternatives sont pertinentes, le test est validé.
Pertinence de l'alternative <canvas> via ARIA
- Repérez tous les éléments
<canvas>porteurs d’information avec une alternative textuelle viaaria-labelouaria-labelledby. - Pour chacun, vérifiez que l’alternative décrit le contenu rendu visuellement dans le canvas.
- Si toutes les alternatives sont pertinentes, le test est validé.
Restitution du contenu alternatif <canvas>
- Repérez tous les éléments
<canvas>avec du contenu HTML placé entre les balises ouvrante et fermante. - Testez avec un lecteur d’écran (NVDA, VoiceOver) que ce contenu alternatif est bien restitué et qu’il transmet l’information présente dans le canvas.
- Si le contenu est correctement restitué pour chaque canvas concerné, le test est validé.
Alternative textuelle courte et concise
- Repérez toutes les images porteuses d’information avec une alternative textuelle.
- Pour chacune, vérifiez que l’alternative est concise : une phrase, l’essentiel sans développer. Plusieurs phrases dans un alt sont un signal d’alerte. Pour les images complexes (infographies, graphiques), l’alt reste court et une description détaillée est fournie via
aria-describedbyou un lien adjacent. - Si toutes les alternatives sont courtes et concises, le test est validé.
Exemples
❌ Non conforme : Alternative redondante ou générique
<!-- Cas 1 : alt tautologique -->
<img src="graphique-resultats-s1-2025.png" alt="graphique">
<!-- Cas 2 : nom de fichier injecté automatiquement -->
<img src="img-hero-desktop-v2-final.jpg" alt="img-hero-desktop-v2-final.jpg">Dans le premier cas, « graphique » décrit le type d’image mais pas son contenu : l’utilisateur ne sait toujours pas ce que le graphique montre. Dans le second, le nom de fichier est injecté automatiquement par le CMS. C’est l’erreur la plus fréquente en audit : une alternative présente mais sans valeur informative.
✅ Conforme : Alternative qui transmet l’information réelle
<img
src="graphique-resultats-s1-2025.png"
alt="Résultats S1 2025 : chiffre d’affaires en hausse de 18 % à 2,4 M€, marge nette stable à 12 %"
>L’alternative transmet les données clés du graphique en une phrase. Un utilisateur de lecteur d’écran reçoit la même information que celui qui voit l’image, sans avoir besoin de développer une description visuelle.
❌ Non conforme : Bouton-image décrivant l’apparence plutôt que l’action
<input type="image" src="btn-valider-commande.png" alt="flèche verte vers la droite">L’alternative décrit l’aspect graphique du bouton. L’utilisateur sait qu’il y a une flèche verte, mais ignore ce qui se passera quand il activera cet élément. Pour un bouton-image, l’alt doit décrire l’action, pas l’image.
✅ Conforme : Bouton-image avec alternative orientée action
<input type="image" src="btn-valider-commande.png" alt="Valider la commande">« Valider la commande » dit à l’utilisateur ce qui va se passer quand il activera cet élément. La pertinence est jugée dans le contexte : pour un <input type="image">, le contexte, c’est toujours une action de formulaire.
Astuces et pièges
⚠️ Le CMS génère l’alt à partir du nom de fichier
WordPress, Drupal et d’autres CMS injectent parfois le nom du fichier ou le titre de la médiathèque comme valeur d’alt. Résultat : des centaines d’images avec alt="photo-accueil-1" ou alt="DSC04892". Vérifiez systématiquement que les contributeurs renseignent un alt métier, pas un identifiant technique.
⚠️ Décrire l’apparence plutôt que le sens
Pour un bouton affichant une loupe, alt="loupe" décrit l’image. alt="Rechercher" décrit ce que fait le bouton dans ce contexte. La pertinence se juge toujours par rapport à l’information ou l’action que l’image porte, jamais par rapport à son apparence visuelle.
💡 La méthode du téléphone
Décrivez la page par téléphone à un collègue qui ne la voit pas. Pour chaque image, que diriez-vous naturellement ? Ce que vous diriez, c’est généralement le bon alt. Cette technique force à privilégier le sens sur la description visuelle.
⚠️ Image légendée : la légende ne remplace pas l’alt
La présence d’un <figcaption> ne dispense pas de fournir une alternative pertinente sur <img>. La légende apporte un complément de contexte ou un crédit photographique ; l’alt décrit ce que l’image représente. La note technique du critère RGAA 1.9 précise explicitement que les images légendées doivent respecter le critère 1.3.
⚠️ Test 1.3.9 : brièveté et pertinence ne s’opposent pas
Pour une infographie dense, l’alt résume le message principal en une phrase, et une description détaillée est fournie via aria-describedby pointant vers un texte adjacent. Choisir entre bref et complet est un faux dilemme : les deux coexistent, l’un dans l’alt, l’autre dans le contenu de la page.
⚠️ CAPTCHA : l’alt décrit la fonction, pas le code
Pour un CAPTCHA visuel, l’alt ne peut pas reproduire le code affiché (ce serait inutile pour un robot et néfaste pour la sécurité). L’alternative décrit la fonction : alt="Code de sécurité à recopier". Une alternative audio ou logique doit être proposée en complément. C’est un cas particulier explicité dans les WCAG (critère de succès 1.1.1).
Questions fréquentes
Quelle est la différence entre le critère RGAA 1.1 et le critère 1.3 ?
Le critère 1.1 vérifie que chaque image informative a une alternative textuelle (présence). Le critère 1.3 vérifie que cette alternative dit quelque chose de pertinent (qualité). Une image peut avoir un alt renseigné et faire quand même échouer le 1.3 si l'alt est générique ou hors sujet. Les deux critères sont complémentaires et doivent être audités ensemble.
Comment adapter l'alternative textuelle d'une même image utilisée dans deux contextes différents ?
Non, et c'est un point contre-intuitif. La pertinence dépend du contexte, pas de l'image elle-même. Un logo d'entreprise dans le header doit avoir l'alt du nom de l'entreprise. Le même logo en pied de page, à côté du texte du nom de l'entreprise, peut avoir un alt vide car il devient décoratif. L'alternative juste est celle qui transmet ce que l'image apporte dans ce contexte précis.
Comment vérifier la pertinence d'une alternative textuelle lors d'un audit RGAA ?
Couvrez ou masquez l'image, lisez uniquement l'alternative. Posez-vous deux questions : est-ce que je comprends ce que l'image communique ? Est-ce que je peux accomplir l'action associée si c'est un bouton ou un lien ? Si la réponse à l'une des deux est non, le test 1.3.1 échoue. Avec NVDA ou VoiceOver, naviguez de image en image (touche I sous NVDA) pour entendre les alternatives telles qu'elles sont restituées.
Pourquoi une alternative textuelle trop longue peut-elle faire échouer le critère 1.3 ?
Oui, via le test 1.3.9. Une alternative qui décrit chaque détail visuel d'une image sur trois paragraphes n'est pas « courte et concise ». Les utilisateurs de loupe d'écran ou de navigation clavier subissent ce texte à chaque passage sur l'image. La règle : l'alternative textuelle porte l'essentiel, une description longue via aria-describedby ou un lien adjacent prend le reste.
Comment vérifier la conformité du test 1.3.8 sur <canvas> avec un lecteur d'écran ?
Oui. Le contenu alternatif entre <canvas> et </canvas> doit être correctement restitué par les technologies d'assistance, ce qui ne peut pas se vérifier par lecture du code source seul. Le support de <canvas> varie entre navigateurs et lecteurs d'écran. Testez avec au minimum NVDA sous Firefox et VoiceOver sous Safari pour couvrir les environnements de test définis dans votre déclaration d'accessibilité.