Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Un lecteur d’écran qui rencontre une image décorative non masquée va l’annoncer : « graphique », « graphique », « graphique » — avant chaque section, à chaque passage. L’utilisateur accumule du bruit sonore sans recevoir la moindre information utile. Masquer les images décoratives, c’est du respect.
Une image décorative est une image dont la disparition ne priverait personne d’aucune information : séparateur visuel, fond artistique, icône purement ornementale. C’est le pendant du critère 1.1 : là où le 1.1 exige une alternative pour les images informatives, le 1.2 exige le silence pour les décoratives.
Pour un <img>, la méthode canonique est alt="" (attribut vide, pas absent — si l’attribut manque, le lecteur d’écran lit le nom du fichier). Pour les <svg>, <canvas>, <object> et <embed>, c’est aria-hidden="true" qui prend en charge la neutralisation. Dans tous les cas, la présence de aria-labelledby, aria-label ou title annule la neutralisation, quelle que soit la technique utilisée par ailleurs.
6 tests pour s'assurer que les images décoratives sont correctement ignorées
Images décoratives <img>
Pour chaque <img> décorative sans légende dans la page :
- Vérifiez que l’élément ne possède PAS les attributs
aria-labelledby,aria-labeloutitle. - Vérifiez qu’il possède AU MOINS l’un des attributs suivants :
alt=""(attribut vide)aria-hidden="true"role="presentation"
- Si les deux conditions sont réunies pour chaque image concernée, le test est validé.
Zones décoratives <area>
Pour chaque <area> décorative (sans attribut href) dans les images cliquables de la page :
- Vérifiez que l’élément ne possède PAS les attributs
aria-labelledby,aria-labeloutitle. - Vérifiez qu’il possède AU MOINS l’un des attributs suivants :
alt=""(attribut vide)aria-hidden="true"role="presentation"
- Si les deux conditions sont réunies pour chaque zone concernée, le test est validé.
Objets images décoratifs <object>
Pour chaque <object type="image/..."> décoratif sans légende dans la page :
- Vérifiez que la balise ne possède PAS les attributs
aria-labelledby,aria-labeloutitle. - Vérifiez que les trois conditions suivantes sont réunies :
- L’élément possède
aria-hidden="true" - Il est dépourvu d’alternative textuelle
- Aucun contenu alternatif n’est présent entre
<object>et</object>
- L’élément possède
- Si toutes ces conditions sont satisfaites pour chaque image, le test est validé.
SVG décoratifs <svg>
Pour chaque <svg> décoratif sans légende dans la page :
- Vérifiez que l’élément ne possède PAS les attributs
aria-labelledbyouaria-label. - Vérifiez que les quatre conditions suivantes sont réunies :
- L’élément possède
aria-hidden="true" - Ni le
<svg>ni ses enfants ne portent d’alternative textuelle - Les éventuels
<title>et<desc>sont vides de contenu - Ni le
<svg>ni ses enfants n’ont d’attributtitle
- L’élément possède
- Si toutes ces conditions sont satisfaites pour chaque SVG, le test est validé.
Canvas décoratifs <canvas>
Pour chaque <canvas> décoratif sans légende dans la page :
- Vérifiez que l’élément ne possède PAS les attributs
aria-labelledby,aria-labeloutitle. - Vérifiez que les trois conditions suivantes sont réunies :
- L’élément possède
aria-hidden="true" - Il est dépourvu d’alternative textuelle
- Aucun contenu alternatif n’est présent entre
<canvas>et</canvas>
- L’élément possède
- Si toutes ces conditions sont satisfaites pour chaque image, le test est validé.
Éléments décoratifs <embed>
Pour chaque <embed type="image/..."> décoratif sans légende dans la page :
- Vérifiez que l’élément ne possède PAS les attributs
aria-labelledby,aria-labeloutitle. - Vérifiez que les deux conditions suivantes sont réunies :
- L’élément possède
aria-hidden="true" - Il est dépourvu d’alternative textuelle
- L’élément possède
- Si ces conditions sont satisfaites pour chaque image, le test est validé.
Exemples
❌ Non conforme : Image décorative avec alt non vide
<img src="separateur-ondule.png" alt="Séparateur décoratif">L’attribut alt n’est pas vide : NVDA annonce « graphique, Séparateur décoratif » à chaque occurrence. L’utilisateur reçoit une information sans valeur qui alourdit la navigation, surtout si le motif se répète sur plusieurs pages.
✅ Conforme : Image décorative correctement masquée avec alt vide
<img src="separateur-ondule.png" alt="">Le alt vide indique aux technologies d’assistance que l’image ne transmet aucune information. NVDA, JAWS et VoiceOver l’ignorent complètement. Aucune annonce parasite pour l’utilisateur.
❌ Non conforme : SVG décoratif avec title exposé
<svg width="24" height="24">
<title>Décoration florale</title>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
</svg>Le <title> est restitué par les lecteurs d’écran : l’élément est exposé dans l’arbre d’accessibilité avec le nom « Décoration florale ». L’utilisateur entend une description pour un élément qui ne devrait rien dire.
✅ Conforme : SVG décoratif correctement masqué
<svg aria-hidden="true" focusable="false" width="24" height="24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
</svg>aria-hidden="true" exclut le SVG entier de l’arbre d’accessibilité. focusable="false" empêche les anciennes versions d’IE et Edge de le rendre focusable au clavier. Double protection, zéro annonce.
Astuces et pièges
⚠️ alt absent n’est pas alt=""
Un <img> sans attribut alt est différent d’un <img alt="">. Quand alt est absent, NVDA et JAWS lisent le nom du fichier source : « graphique, separateur tiret ondule tiret bleu tiret 2024 point png ». C’est l’erreur la plus fréquente en audit RGAA. Toujours écrire alt="", ne jamais omettre l’attribut.
⚠️ title annule la neutralisation
<img src="deco.png" alt="" title="Décoration"> est non conforme : l’attribut title est restitué par certains lecteurs d’écran même quand alt est vide. Le RGAA l’interdit explicitement : une image décorative ne doit porter aucun des attributs title, aria-label ou aria-labelledby.
💡 SVG : toujours ajouter focusable="false"
Internet Explorer et les versions d’Edge antérieures à Chromium rendaient les SVG focusables au clavier par défaut. Ajouter focusable="false" sur le <svg> ne nuit jamais sur les navigateurs modernes et corrige le comportement sur les anciens. C’est une ligne défensive à systématiser.
⚠️ Une image légendée est toujours informative
Selon le RGAA, une image insérée dans un <figure> avec un <figcaption> est systématiquement considérée comme porteuse d’information. La présence d’une légende démontre que l’image justifie un contexte. Il n’existe pas d’image décorative légendée conforme : si une légende est présente, l’image relève du critère 1.1.
⚠️ Images CSS : hors périmètre du critère 1.2
Une image chargée via background-image, background, content (pseudo-éléments) ou list-style-image n’apparaît pas dans le DOM HTML. Les technologies d’assistance l’ignorent automatiquement. Aucune action requise : le critère 1.2 ne concerne que les éléments présents dans le balisage.
⚠️ role="presentation" accepté uniquement pour <img> et <area>
alt="", aria-hidden="true" et role="presentation" sont tous les trois acceptés par le RGAA pour neutraliser un <img> ou un <area>. En revanche, pour les <svg>, <canvas>, <object> et <embed> décoratifs, seul aria-hidden="true" est accepté. Cette distinction est spécifique au RGAA : les WCAG sont moins prescriptifs sur ce point.
Questions fréquentes
Comment déterminer si une image est décorative ou informative ?
Supprimez mentalement l’image de la page. Si la perte d’information est nulle — le contenu reste entièrement compréhensible — l’image est décorative. Si un utilisateur qui ne voit pas la page perd une information utile (données, contexte, instruction), l’image est informative et relève du critère 1.1.
Quelle différence entre alt="" et aria-hidden="true" pour une image décorative ?
alt="" laisse l’image dans l’arbre d’accessibilité mais sans nom ni rôle annoncé : c’est la méthode HTML native, recommandée pour <img>. aria-hidden="true" supprime l’élément entier de l’arbre, ce qui est nécessaire pour les <svg>, <canvas>, <object> et <embed> qui n’ont pas d’attribut alt. Le résultat perceptible par l’utilisateur est identique dans les deux cas : aucune annonce.
Comment auditer le critère RGAA 1.2 sur les images décoratives en pratique ?
Parcourez la page avec NVDA + Firefox ou JAWS + Chrome et notez chaque annonce d’image. Si une image décorative est annoncée, examinez son code : alt absent ou non vide, title présent, aria-label sur un SVG. Les outils de développement du navigateur complètent l’audit : un nœud avec aria-hidden="true" ou un ancêtre aria-hidden affiche le message « Accessibility node not exposed », confirmant que l’image est bien ignorée.
Comment traiter une <img> décorative placée à l'intérieur d'un lien selon le RGAA ?
Si le lien contient uniquement l’image sans texte visible, non : l’image est le seul porteur du nom du lien et doit avoir un alt décrivant la destination. Elle relève alors du critère 1.6. Si le lien contient aussi un texte visible pertinent, l’image peut avoir alt="" — le texte du lien suffit à identifier la destination.
Comment utiliser role="presentation" pour masquer un SVG décoratif aux lecteurs d'écran ?
Non, pas selon le RGAA 4.1. Pour les <svg> décoratifs, seul aria-hidden="true" est accepté (test 1.2.4). role="presentation" est autorisé pour <img> et <area> uniquement. Cette précision figure dans les tests du RGAA : les critères applicables diffèrent selon le type d’élément.