Qu'est-ce que le texte alternatif ?

Le texte alternatif est la version écrite d'une image, portée par l'attribut alt de l'élément image en HTML. Les technologies d'assistance le restituent à la place du visuel, les navigateurs l'affichent lorsqu'une image ne se charge pas, et les moteurs de recherche y voient un signal d'interprétation du contenu visuel. Dans une boutique, l'attribut concerne les photos produit, les bannières de catégorie, les guides des tailles diffusés en image, les pictogrammes de paiement et de livraison ainsi que les visuels de campagne. On parle souvent de balise alt, alors qu'il s'agit d'un attribut.

Définition

Les Web Content Accessibility Guidelines imposent une alternative textuelle pour les contenus non textuels au critère de succès 1.1.1, niveau de conformité A. La règle ne consiste pas à décrire chaque image mais à transmettre la même fonction : une photo produit informative appelle une description précise, une image décorative reçoit un attribut alt vide afin d'être ignorée par les technologies d'assistance, et une image servant de lien décrit la destination plutôt que l'illustration. Dans l'Union européenne, l'European Accessibility Act étend les obligations d'accessibilité aux services de commerce en ligne destinés aux consommateurs. La surcharge de mots-clés dessert les deux publics.

Pourquoi c'est important

Dans une boutique composable, les images proviennent d'un PIM, d'un DAM ou d'un CMS : l'alternative se saisit donc auprès de l'actif dans ce système et circule avec l'URL de l'image via l'API, localisée par marché comme tout autre champ de contenu. Les composants du frontend gagnent à traiter cette valeur comme une propriété obligatoire plutôt qu'à la déduire d'un nom de fichier, et à produire un attribut vide en l'absence de texte saisi plutôt qu'un contenu de remplacement. Les chaînes d'images responsives qui génèrent plusieurs déclinaisons conservent une seule alternative par actif, et le chargement différé ne doit jamais retarder l'attribut.

Cas d'usage

Sur les fiches produit, chaque image de galerie précise ce qui la distingue : vue de dos, gros plan sur la matière ou repère d'échelle. Sur les pages de liste, l'alternative reprend en général le nom du produit et la variante représentée, ce qui garde un balisage lisible sans bruit inutile. Une bannière dont l'offre figure uniquement dans le graphisme doit reprendre ce message en texte, faute de quoi il disparaît sans les images. Les contenus éditoriaux, les lookbooks et les galeries de clients suivent la même règle, les séparateurs décoratifs restant muets.

Voir aussi

Découvrez Image Optimization · SEO.