Lecture : 10 min · Yoan Gwizdala

Fiche produit accessible : alt, variantes, prix et avis

C'est la page qui décide de l'achat, et celle où les défauts sont les plus visibles : 53,1 % des pages d'accueil analysées en 2026 comportent une image sans alternative textuelle. Sur une fiche produit, cela ne se traduit pas par une gêne : cela se traduit par un produit qu'on ne peut pas choisir.

Le texte alternatif : ce qu'il faut y mettre, et ce qu'il ne faut pas

Une alternative n'est pas une description exhaustive, et ce n'est pas non plus un emplacement à mots-clés. C'est ce que vous diriez au téléphone à un client qui vous demande à quoi ressemble le produit.

Cas	À ne pas écrire	À écrire
Photo principale	alt="chaussure"	alt="Botte de randonnée en cuir marron, tige montante, semelle crantée"
Nom du fichier tel quel	alt="IMG_4821.jpg"	Une phrase : ce que la photo montre
Bourrage de mots-clés	alt="chaussure randonnée pas cher promo cuir marche montagne"	Une description honnête ; Google la lit aussi
Vignette purement décorative	alt="décoration"	alt="", vide, donc correctement ignorée
Image qui porte du texte (prix, promo)	Rien	Le texte de l'image, repris dans l'alternative. Mieux encore : du vrai texte par-dessus

La galerie et les vues multiples

Sur une galerie de six photos, six alternatives détaillées produisent une bouillie. La bonne pratique : une alternative complète sur la vue principale, puis des alternatives courtes et différenciantes sur les autres : « vue de dos », « détail de la couture », « porté, taille 38 ». Les vignettes de navigation, elles, sont des boutons : leur nom accessible doit dire ce qu'elles font, pas décrire l'image.

Le zoom

Un zoom qui ne fonctionne qu'au survol de la souris est inaccessible par construction. Il faut au minimum une activation au clic ou au clavier, et une image agrandie qui ne se referme pas dès que le pointeur bouge d'un pixel.

Les variantes : taille, couleur, matière

C'est le point le plus souvent cassé après les alternatives, parce que les sélecteurs de variantes sont presque toujours redessinés à la main pour l'esthétique. Une pastille de couleur ou un carré de taille doit être un vrai contrôle de formulaire.

<fieldset>
  <legend>Taille</legend>
  <input type="radio" id="t-38" name="taille" value="38">
  <label for="t-38">38</label>
  <input type="radio" id="t-39" name="taille" value="39" disabled>
  <label for="t-39">39 (épuisée)</label>
</fieldset>

Trois conséquences immédiates de cette structure :

• Le groupe est annoncé comme un groupe, avec son intitulé « Taille ».
• Les flèches naviguent entre les options, l'état sélectionné est annoncé.
• Une variante indisponible est dite indisponible, et pas seulement grisée. Une pastille barrée en CSS ne dit rien ; disabled et le mot « épuisée » disent tout.

Pour les couleurs, la contrainte s'ajoute : la couleur ne peut pas être la seule information. Une pastille verte doit avoir un nom, « Vert olive », accessible au survol comme au focus, et lisible par un lecteur d'écran.

Le prix : le cas du prix barré

Un prix promotionnel affiché « 49 € 79 € » avec la seule couleur et un trait décoratif pose deux problèmes.

• Le barré doit être sémantique. <s> ou <del> portent le sens ; un text-decoration: line-through sur un <span> ne l'a pas. Selon les lecteurs d'écran, la nuance passe ou ne passe pas, d'où l'usage d'ajouter une mention masquée visuellement : « ancien prix ».
• Le contraste. C'est le défaut numéro un du web, sur 83,9 % des pages. Les prix barrés, les mentions d'éco-participation, les frais de port et les délais de livraison sont systématiquement en gris clair sur blanc, précisément les informations qu'un client a besoin de lire avant de payer. Le seuil est de 4,5 pour 1 en texte courant, 3 pour 1 au-delà de 24 px ou en gras à partir de 19 px.

Et l'unité doit être lisible : 49 € avec une espace insécable, plutôt qu'un « 49 » et un « € » séparés par un saut de ligne au zoom.

Le bouton « Ajouter au panier »

30,6 % des pages analysées comportent un bouton vide. Sur une fiche produit, le cas typique est le bouton en pictogramme seul (un panier, un cœur pour la liste d'envies), sans texte.

<!-- non : annoncé « bouton », sans plus -->
<button><svg>…</svg></button>

<!-- oui -->
<button>
  <svg aria-hidden="true">…</svg>
  <span class="visually-hidden">Ajouter au panier</span>
</button>

Sur une page de liste, le nom doit en outre être distinctif : vingt boutons « Ajouter au panier » identiques, parcourus à la liste par un lecteur d'écran, ne permettent pas de savoir lequel concerne quel produit. « Ajouter au panier : botte de randonnée en cuir marron » lève l'ambiguïté.

Le stock, les délais, et tout ce qui change sans rechargement

Choisir la taille 39 met à jour le prix, le stock et le délai de livraison, sans recharger la page. Pour un lecteur d'écran, ces changements sont silencieux s'ils ne sont pas placés dans une région vivante :

<p role="status">Taille 39 : en stock, expédié sous 48 h. 52 €.</p>

C'est le même mécanisme que pour la confirmation d'ajout au panier, et c'est probablement la correction la plus rentable d'une fiche produit : quelques lignes, et l'information cesse d'être réservée à ceux qui la voient.

Les avis et les étoiles

Une note de 4,2 sur 5 rendue par cinq images d'étoiles est illisible sans alternative. Deux corrections :

• Le bloc de notation porte un texte : « Note moyenne : 4,2 sur 5, sur 128 avis ». Les étoiles deviennent alors décoratives, avec aria-hidden="true".
• Le formulaire de dépôt d'avis, s'il utilise des étoiles cliquables, est un groupe de boutons radio, même structure que les tailles.

Le tableau des tailles et les onglets

Deux pièges rapides à lever :

• Un guide des tailles doit être un vrai <table> avec ses <th>, pas une image. Une image de tableau de correspondances est doublement mauvaise : illisible en lecteur d'écran, et illisible tout court sur un téléphone.
• Les onglets « Description / Composition / Livraison » se pilotent au clavier ou n'existent pas. En cas de doute, les remplacer par des <details> : le composant natif fonctionne partout, sans une ligne de JavaScript.

Ce que vous y gagnez en dehors de la conformité

Une fiche produit accessible est une fiche produit mieux indexée : les alternatives d'images alimentent Google Images, les titres structurés alimentent les extraits enrichis, et le texte réel remplace le texte en image. Ce n'est pas un effet secondaire heureux : c'est le même travail. Un robot d'indexation est, techniquement, un utilisateur qui ne voit pas les images et ne peut pas cliquer.

Faire regarder mes fiches produit

Questions fréquentes

Que faut-il écrire dans le alt d'une photo produit ?

Ce que vous diriez au téléphone à un client qui demande à quoi ressemble le produit : matière, couleur, forme, détail distinctif. Par exemple, une botte de randonnée en cuir marron, tige montante, semelle crantée. Ni le nom du fichier, ni une liste de mots-clés, ni le mot chaussure tout seul.

Faut-il mettre un alt sur les images décoratives ?

Il faut mettre un attribut alt vide, écrit alt égale deux guillemets sans rien entre eux. Cela indique explicitement que l'image ne porte pas d'information et la fait ignorer par les technologies d'assistance. Ce qui est fautif, c'est l'attribut absent, ou une alternative qui répète un texte déjà présent à côté de l'image.

Comment rendre un sélecteur de taille accessible ?

En l'appuyant sur de vrais boutons radio regroupés dans un fieldset doté d'une legend indiquant Taille. Le groupe est alors annoncé comme tel, les flèches naviguent entre les options et l'état sélectionné est restitué. Une variante indisponible reçoit l'attribut disabled et le mot épuisée dans son étiquette, plutôt qu'un simple grisé en CSS.

Un prix barré pose-t-il un problème d'accessibilité ?

Deux, en réalité. Le barré doit être porté par un élément sémantique comme s ou del plutôt que par une décoration CSS, et il est prudent d'ajouter une mention masquée visuellement indiquant qu'il s'agit de l'ancien prix. Ensuite, le contraste : les prix barrés, les frais de port et les mentions d'éco-participation sont presque toujours en gris trop clair, alors que ce sont les informations à lire avant de payer.

Comment nommer un bouton d'ajout au panier en icône seule ?

En laissant l'icône décorative, avec aria-hidden à true, et en ajoutant un texte masqué visuellement qui dit Ajouter au panier. Sur une page de liste, ce texte doit en plus être distinctif : vingt boutons identiques ne permettent pas de savoir lequel concerne quel produit, donc on y ajoute le nom du produit.

L'accessibilité d'une fiche produit aide-t-elle le référencement ?

Oui, et c'est le même travail. Les alternatives d'images alimentent Google Images, une structure de titres correcte aide à la compréhension de la page, et remplacer du texte en image par du vrai texte rend ce texte indexable. Un robot d'indexation est techniquement un utilisateur qui ne voit pas les images et ne peut pas cliquer.