Concilier les experts de l’accessibilité et du SEO sur le sujet des images de décoration

Les images de décoration

Les images de décoration sont des éléments visuels utilisés à des fins esthétiques. Les supprimer n’enlève aucune information. Cependant, en matière de SEO, il est parfois intéressant d’utiliser ces images afin d’en favoriser l’indexation, tandis que les technologies d'assistance doivent les ignorer pour une meilleure accessibilité.

Cas pratique de résolution d’un conflit entre le SEO et l’A11Y sur les images de décoration

Sur un site de vente en ligne de peluches, le SEO fait le choix de renseigner les attributs alt des images de décoration. Ces images ne sont pas contenues dans des liens.

Valorisation de l'attribut alt par l’expert SEO

L'attribut alt est exploité par le SEO sur les images de décoration pour fournir un texte alternatif à destination des moteurs de recherche.

Ici, le SEO demande un attribut alt renseigné sur l’image de décoration :

<img alt="Peluche Yéti Panda - IA intégrée pour raconter des histoires" src="yeti-panda.png">

L’attribut alt contient une valeur, les mots clés retenus par le SEO.

Invalidation du critère sur les images de décoration par l’expert A11Y

Puisque l’image n’apporte pas d’information, elle est considérée comme décorative. L’image est donc invalidée par l'expert A11Y avec le critère 1.2 du RGAA 4.2.1 ou le critère 1.1.1 des WCAG 2.1 puisque son attribut alt contient une valeur.

Pour l’accessibilité, le code conforme de cette image devrait donc être le suivant :

<img alt="" src="yeti-panda.png">

L’image possède ici un attribut alt vide qui signale le caractère décoratif de l’image et permet aux technologies d’assistance de l’ignorer.

Attributs pour résoudre le conflit SEO et A11Y

Attribut alt renseigné pour le SEO, attribut alt vide pour l’A11Y, cette image pose problème. Il est néanmoins possible de concilier ces exigences contradictoires grâce à ARIA.

Pour garantir à la fois l'accessibilité des images de décoration et la maîtrise de leur indexation, ARIA met à disposition l’attribut aria-hidden="true".

Exemple de code pour une image de décoration ignorée par les technologies d’assistance et restituée pour les moteurs de recherche :

<img alt="Peluche Yéti Panda - IA intégrée pour raconter des histoires" aria-hidden="true" src="yeti-panda.png">

Dans cet exemple, l'attribut alt est renseigné avec un texte alternatif descriptif, ce qui permet au SEO de réaliser ses objectifs d’indexation. L’attribut aria-hidden="true" permet quant à lui aux technologies d'assistance d'ignorer cette image lors de la restitution du contenu.

Conclusion

En utilisant une combinaison d'attributs tels que alt et aria-hidden=”true”, il est possible de concilier les exigences du SEO et de l'accessibilité numérique pour les images de décoration. Cela permet d'optimiser le référencement tout en garantissant une expérience accessible pour tous les utilisateurs.

Le sujet des images de décoration pourrait être pris en compte dès l’accompagnement. S’il est pris en compte après la phase de développement, après l’audit accessibilité, cette solution permet de se mettre en conformité avec les normes d’accessibilité sans remettre en cause les développements existants.