Image décorative non ignorée : RGAA 1.2, alt vide et correction

Q: Quelle différence entre omettre alt et écrire alt="" ?

La différence est majeure. Sans alt , le lecteur d'écran annonce souvent le nom du fichier ou l'URL. Avec alt="" , il ignore l'image. Les deux ne sont pas équivalents : alt="" est la seule forme correcte pour une image décorative.

Q: Faut-il ajouter role="presentation" en plus de alt="" ?

alt="" suffit pour les <img> : il retire déjà l'image de l'arbre d'accessibilité, exactement comme le ferait role="presentation" ou role="none" . Ajouter ce rôle est donc redondant et inutile sur une balise <img> . Pour les <svg> , c'est aria-hidden="true" qui est la méthode recommandée.

Q: Les images en CSS (background-image) sont-elles concernées ?

Non. Une image en background-image CSS est ignorée par les technologies d'assistance par défaut - elle n'existe pas dans le DOM accessible. Cela renforce l'idée que les images purement décoratives devraient idéalement être gérées en CSS, mais ce n'est pas toujours possible. Réserve : si une image de fond CSS porte de l'information, elle devient inaccessible et pose un autre problème (RGAA 1.1). La règle ci-dessus ne vaut que pour les images de fond réellement décoratives.

C'est quoi

Une image est dite décorative quand sa suppression ne ferait perdre aucune information à l'utilisateur. Elle sert uniquement l'apparence.

Pour qu'un lecteur d'écran l'ignore, deux conditions doivent être réunies :

L'attribut alt doit être présent et vide : alt="".
L'image ne doit pas être annoncée via un nom accessible venu d'ailleurs (aria-label, aria-labelledby, title).

Sans alt vide, le comportement varie selon les lecteurs d'écran :

Certains lisent le nom du fichier (decorative-banner.jpg).
D'autres lisent l'URL complète ou signalent "image".
Aucun comportement n'est prévisible ni acceptable pour l'utilisateur.

Pour les <svg> décoratifs, l'approche est différente : ajouter aria-hidden="true" sur l'élément, complété par focusable="false" pour neutraliser un comportement de focus hérité d'anciens navigateurs.

Qui est touché

Les personnes aveugles ou malvoyantes qui utilisent un lecteur d'écran : chaque image non ignorée s'insère dans le flux de lecture et brise la compréhension du contenu.
Les personnes naviguant au clavier avec une technologie d'assistance : les images mal balisées apparaissent parfois comme des éléments focalisables sans utilité.
Les personnes ayant des troubles cognitifs : un surplus d'annonces parasites augmente la charge cognitive et rend la navigation plus difficile.

Impact business

L'erreur est invisible à l'écran mais audible immédiatement au lecteur d'écran. Sur une page comportant plusieurs images décoratives - en-tête, séparateurs, icônes purement esthétiques - chaque annonce parasite interrompt la lecture du contenu réel.

L'impact dépend du nombre d'images concernées et de leur position dans le flux. Une image décorative en haut de page, annoncée avant le contenu principal, force l'utilisateur à l'ignorer à chaque chargement.

L'enquête WebAIM Million, qui analyse chaque année des millions de pages d'accueil, place systématiquement les erreurs liées aux attributs alt manquants ou incorrects parmi les plus fréquentes. Les images décoratives mal balisées contribuent directement à ce volume.

Sources des chiffres

Comment le détecter

Audit Mynto : le scan détecte les images sans alt vide qui ne sont pas cachées aux technologies d'assistance.
Manuel - inspecteur de code : ouvre les outils de développement (F12), sélectionne une image décorative et vérifie sa balise. Elle doit ressembler à <img src="..." alt="">.
Lecteur d'écran : parcours la page en lecture continue ou via la navigation aux images (touche G sous NVDA, G sous JAWS, en mode navigation). Si une image censée être décorative est annoncée - nom de fichier, URL ou simple mot "image" - elle est mal balisée. Une image correctement marquée alt="" n'est jamais annoncée.
Vérificateur automatique : axe DevTools ou WAVE signalent les images sans attribut alt mais ne distinguent pas toujours décorative et informative - le jugement éditorial reste indispensable.

Comment corriger

Avant - HTML

<img src="separator.jpg" alt="séparateur décoratif">

<img src="banner-bg.png">

<svg width="24" height="24"><path d="M12 2..."/></svg>

Après - HTML

<img src="separator.jpg" alt="">

<img src="banner-bg.png" alt="">

<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 2..."/></svg>

Pour une balise <img> décorative, la correction est simple : ajouter alt="". L'attribut doit être présent mais vide - ne jamais l'omettre complètement.

Retirer aussi tout title, aria-label ou aria-labelledby sur ces images : ils fournissent un nom accessible même quand alt est vide.

Pour les <svg> décoratifs, aria-hidden="true" est la bonne approche. Ajoute focusable="false" pour corriger un bug ancien d'Internet Explorer que certains navigateurs héritent encore.

Sur WordPress, les images insérées via l'éditeur de blocs permettent de laisser le champ « Texte alternatif » vide et de cocher « L'image est décorative » depuis Gutenberg 12+. Le CMS génère alors alt="" automatiquement. Si tu utilises un constructeur de page comme Bricks ou Elementor, cherche l'option équivalente dans les réglages de chaque widget image.

Attention au cas particulier d'une image seule dans un lien ou un bouton : si tu mets alt="", le lien ou le bouton se retrouve sans intitulé accessible. Dans ce cas l'image n'est pas réellement décorative et l'alt doit décrire la destination ou l'action (critères RGAA 6.1 et 7.1).

Questions fréquentes

Quelle différence entre omettre alt et écrire alt="" ?

La différence est majeure. Sans alt, le lecteur d'écran annonce souvent le nom du fichier ou l'URL. Avec alt="", il ignore l'image. Les deux ne sont pas équivalents : alt="" est la seule forme correcte pour une image décorative.

Comment savoir si une image est vraiment décorative ?

Pose-toi une question : si tu retires cette image, l'utilisateur perd-il une information utile à la compréhension du contenu ? Si non, elle est décorative. Si oui, elle est informative et doit porter un alt descriptif (critère RGAA 1.1).

Faut-il ajouter role="presentation" en plus de alt="" ?

alt="" suffit pour les <img> : il retire déjà l'image de l'arbre d'accessibilité, exactement comme le ferait role="presentation" ou role="none". Ajouter ce rôle est donc redondant et inutile sur une balise <img>. Pour les <svg>, c'est aria-hidden="true" qui est la méthode recommandée.

Les images en CSS (background-image) sont-elles concernées ?

Non. Une image en background-image CSS est ignorée par les technologies d'assistance par défaut - elle n'existe pas dans le DOM accessible. Cela renforce l'idée que les images purement décoratives devraient idéalement être gérées en CSS, mais ce n'est pas toujours possible. Réserve : si une image de fond CSS porte de l'information, elle devient inaccessible et pose un autre problème (RGAA 1.1). La règle ci-dessus ne vaut que pour les images de fond réellement décoratives.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Image décorative non ignorée par les lecteurs d'écran