L'intégration d'une page e-commerce se termine. L'expert SEO relit, demande à remplir les alt des images d'ambiance avec les mots-clés du produit. L'expert accessibilité relit ensuite, et demande précisément l'inverse : un alt vide, pour que le lecteur d'écran ignore l'image. Les deux invoquent leur référentiel, les deux ont raison. Et il existe une solution propre qui satisfait tout le monde.
№ 01Une image de décoration, c'est quoi.
Une image de décoration est une image dont la suppression n'enlève aucune information à la page. Photo d'ambiance, motif, illustration secondaire, pictogramme déjà doublé par un texte… toutes existent pour la forme, pas pour le fond. C'est le critère 1.2 du RGAA qui cadre ce point : ces images doivent être ignorées par les technologies d'assistance.
Concrètement, cela signifie alt="" (et rien d'autre). Le lecteur d'écran passe sans annoncer, l'utilisateur aveugle gagne du temps, et la page reste conforme.
№ 02Cas pratique : le Yéti Panda.
Imaginons une boutique de peluches en ligne. Une fiche produit affiche une photo principale (la peluche sur fond blanc) et trois photos d'ambiance (salon, lit d'enfant, boîte cadeau). Ces trois dernières sont de pures images de décoration — elles n'apportent aucune information supplémentaire sur le produit.
№ 03La vision SEO.
L'expert SEO voit une opportunité : trois images indexées par Google, trois chances de remonter sur la requête peluche yéti IA enfant
. Il remplit donc les alt avec une description riche et chargée en mots-clés.
<img src="yeti-panda-salon.jpg"
alt="Peluche Yéti Panda — IA intégrée pour raconter des histoires">Vu du moteur de recherche, l'attribut fait son travail : contenu décrit, mots-clés placés, image dans l'index Google Images.
№ 04Le refus de l'A11y.
L'expert accessibilité invalide ce code. Son argument est simple : l'image n'apporte aucune information au contenu de la page — elle est purement décorative. En la décrivant, on bruite le parcours des utilisateurs de lecteurs d'écran.
Pourquoi c'est un problème
- Bruit cognitif — l'utilisateur aveugle entend trois fois de suite
Peluche Yéti Panda, IA intégrée pour raconter des histoires
, alors que l'information figure déjà dans le titre et la description produit. - Non-conformité RGAA (critère 1.2) — une image de décoration doit être correctement ignorée par les technologies d'assistance. Un
altrempli la rend perceptible — et invalide le critère. - Perte de confiance — répété sur l'ensemble du site, ce bruit finit par décrocher l'utilisateur, qui renonce à explorer la page.
Le code strictement accessible serait donc celui-ci :
<img src="yeti-panda-salon.jpg" alt="">… mais le SEO perd alors trois descriptions indexées. Impasse.
№ 05La solution aria-hidden.
Heureusement, on peut satisfaire les deux camps grâce à l'attribut aria-hidden="true". L'idée est simple : on garde le alt rempli que veut le SEO (Google le lit), et on dit explicitement aux lecteurs d'écran d'ignorer l'élément entier.
<img src="yeti-panda-salon.jpg"
alt="Peluche Yéti Panda — IA intégrée pour raconter des histoires"
aria-hidden="true">Ce que chacun perçoit
- Le robot Google lit le
altet indexe l'image avec ses mots-clés. - Le lecteur d'écran rencontre
aria-hidden="true"et ignore complètement l'élément — ni annonce, ni pause, ni bruit. - Le navigateur visuel, lui, affiche l'image normalement : le comportement est strictement identique pour les utilisateurs voyants.
Technique propre, standardisée (ARIA 1.2), validée par les deux camps. Elle met la page en conformité avec le critère 1.2 du RGAA sans amputer la stratégie SEO en place.
№ 06Limites et alternatives.
aria-hidden est puissant — donc à manier avec rigueur. Quelques points de vigilance :
Pièges à éviter
- Jamais sur une image d'information — si l'image porte un contenu non redondant (graphique, capture d'écran, schéma), elle doit être décrite, pas cachée.
aria-hiddenest réservé aux décorations pures. - Jamais sur un lien ou un bouton — si l'image est elle-même cliquable (logo qui renvoie à l'accueil, bouton-image), la cacher rend l'élément inutilisable au clavier. Là, le
altdoit décrire la destination. - Attention aux descendants focusables —
aria-hidden="true"s'applique à tout le sous-arbre. Un<a>ou un<button>à l'intérieur deviendrait invisible aux technologies d'assistance tout en restant atteignable au clavier — une erreur WCAG sévère.
Deux alternatives utiles selon le contexte :
- Image CSS (
background-image) — si l'image est vraiment purement esthétique, la sortir du HTML est souvent la solution la plus propre. Elle disparaît alors complètement de l'arbre d'accessibilité, et l'enjeu SEO est traité autrement (mots-clés dans le texte de la page). role="presentation"— plus doux quearia-hidden, il neutralise la sémantique de l'élément sans cacher son sous-arbre. Utile quand on veut garder un lien ou un bouton focusable à l'intérieur de l'image.
Conclusion.
Il n'y a pas à sacrifier le SEO pour l'accessibilité, ni l'inverse. Ce type d'arbitrage technique fait partie intégrante de notre métier : plutôt que d'opposer les expertises, on trouve les solutions techniques standards — ici aria-hidden, ailleurs role="heading", aria-label, visually-hidden… — qui permettent de réunir les deux.
Pour aller plus loin, découvrez notre offre d'accompagnement technique ou nos formations développeurs.
Un doute sur vos attributs alt ?
Nous auditons vos gabarits et vos modèles de contenu — avec des correctifs priorisés pour vos développeurs et vos rédacteurs.