Fiche produit accessible : variantes, prix, stock et avis
En bref — la page qui décide de l'achat doit être lisible par tous
La fiche produit est la page la plus visitée et la plus stratégique d'une boutique : c'est là que se choisissent la taille et la couleur, que se lisent le prix et la disponibilité, et que se clique « Ajouter au panier ». C'est aussi là que se concentrent des obstacles d'accessibilité très courants — souvent parce qu'une information n'existe que sous forme de couleur ou de composant sur mesure non étiqueté. L'European Accessibility Act (norme EN 301 549 / WCAG 2.1 AA), applicable au commerce électronique depuis le 28 juin 2025, impose notamment :
- Un sélecteur de variantes (taille, couleur) en vrais contrôles groupés, étiquetés et utilisables au clavier (1.3.1, niveau A · 4.1.2, niveau A) ;
- Une information jamais portée par la seule couleur — la pastille de coloris choisie, le stock, le prix barré doivent aussi être en mots ou en forme (1.4.1, niveau A) ;
- Un ajout au panier confirmé au lecteur d'écran via une région live, pas seulement par une animation (4.1.3, niveau AA) ;
- Une galerie d'images, une note et des avis accessibles — alternatives textuelles, note exprimée en texte « 4 sur 5 », pas une rangée d'étoiles muette (1.1.1, niveau A · 4.1.2).
Bonne nouvelle : sur une fiche produit, presque tout relève du socle de niveau A et AA — il n'y a pas ici de critère « de confort » AAA optionnel sur lequel se réfugier. Autrement dit, ces règles ne sont pas des bonus : elles sont exigées, et elles touchent directement votre taux de conversion.
Si une seule page de votre boutique doit être irréprochable, c'est celle-ci. La fiche produit est le carrefour de la décision d'achat : on y compare, on y choisit une variante, on y vérifie le prix et le stock, on y lit les avis, puis on ajoute au panier. Chaque obstacle d'accessibilité y a un coût immédiat : un client qui ne peut pas choisir sa taille, ou qui ne sait pas si l'article est en stock, n'achète pas. Voici les six familles de règles WCAG à appliquer sur une page produit, ce que l'EAA exige précisément, et comment le vérifier.
Pourquoi la fiche produit exclut si souvent
La fiche produit cumule les composants les plus « riches » d'une boutique : une galerie d'images avec zoom, un sélecteur de coloris en pastilles, un sélecteur de tailles, un prix parfois en promotion, un indicateur de stock, un bouton d'ajout au panier qui réagit sans recharger la page, et un bloc d'avis avec des étoiles. Or ce sont précisément les éléments que les équipes recodent « sur mesure » en <div> stylés, en perdant au passage le rôle, le nom et l'état que les aides techniques attendent.
Pour une personne qui utilise un lecteur d'écran, une pastille de couleur en <span> cliquable n'est qu'une « image décorative » sans nom : impossible de savoir qu'on choisit « Bleu nuit », ni que c'est sélectionné. Pour une personne daltonienne, un coloris ou un statut « en stock / épuisé » signalé uniquement par une couleur est indéchiffrable. Pour une personne en navigation clavier, un sélecteur de variante qu'on ne peut pas atteindre bloque toute la commande. L'EAA s'appuie sur l'EN 301 549, fondée sur les WCAG 2.1 niveau AA ; les critères en jeu sur une fiche produit sont des fondations : 1.1.1 (contenu non textuel), 1.3.1 (information et relations), 1.4.1 (utilisation de la couleur), 2.1.1 (clavier), 2.4.4 (fonction des liens), 4.1.2 (nom, rôle, valeur) et 4.1.3 (messages d'état).
Les 6 règles pour une fiche produit accessible
Décrire le produit, pas répéter « image »
Chaque visuel produit a besoin d'un texte alternatif qui décrit ce qu'il montre : « Sac à dos en toile bleu nuit, vue de face, bretelles rembourrées » plutôt que « produit » ou un nom de fichier. Les vignettes qui changent l'image principale doivent être de vrais boutons atteignables et activables au clavier, avec un nom clair (« Voir la vue de dos »). Si vous proposez un zoom, il doit s'ouvrir et se fermer au clavier, sans piéger le focus. Les images purement décoratives (fioritures) reçoivent un alt="" pour être ignorées.
<img alt="Sac à dos toile bleu nuit, vue de face"> ; les vignettes sont des <button> nommés, le zoom s'ouvre et se ferme avec Échap.alt="image-produit", des vignettes en <div> impossibles à atteindre au clavier.→ Guide dédié : le texte alternatif des images produit.
Des groupes étiquetés, pas des pastilles muettes
Le choix d'une taille ou d'un coloris doit reposer sur de vrais composants de formulaire : des boutons radio dans un groupe <fieldset> avec une <legend> (« Choisissez une taille »), ou des boutons portant un nom accessible et un état (aria-pressed ou aria-checked). Chaque option doit être atteignable au clavier, et son nom doit être textuel : même une pastille de couleur a besoin d'un libellé « Bleu nuit ». Une variante indisponible ne doit pas être signalée par la seule apparence : marquez-la désactivée de façon accessible et/ou ajoutez « épuisé » dans son nom.
<fieldset> « Taille » de boutons radio ; chaque coloris est un <button> nommé « Bleu nuit » avec aria-pressed ; « Bleu nuit — épuisé » pour une variante indisponible.<span> de couleur cliquables sans nom ni état : au lecteur d'écran, on ne sait ni ce qu'on choisit, ni ce qui est sélectionné.→ Voir aussi les composants interactifs accessibles et les filtres de produits.
Ne jamais confier le sens à la seule couleur ou au seul style
Le prix doit être un texte réel (pas une image), correctement structuré pour être lu d'un bloc. En cas de promotion, l'ancien prix ne doit pas se distinguer uniquement par une couleur ou un effet barré visuel : ajoutez une indication textuelle du type « Ancien prix » / « Prix réduit » (un balisage <del>/<ins> aide, complété d'un libellé). C'est le critère 1.4.1 : l'information ne doit pas reposer sur la seule perception de la couleur. Et si le prix figure dans une image (bannière), il lui faut une alternative textuelle.
→ Voir aussi le contraste des couleurs.
« En stock » / « Épuisé » est une information, pas une couleur
Le statut de disponibilité — en stock, stock faible, épuisé, précommande — guide directement la décision d'achat. Il doit être exprimé en texte et pas seulement par une pastille verte ou rouge (1.4.1). Quand le stock change après une action (vous sélectionnez une variante épuisée, ou le dernier exemplaire part), l'information doit être annoncée au lecteur d'écran via une région live (role="status" ou aria-live), sinon le changement passe inaperçu (4.1.3). Reliez le statut au produit ou à la variante concernée pour lever toute ambiguïté (1.3.1).
role="status" annonce « Taille M : épuisée ».→ Voir aussi les messages d'état et d'erreur.
Un bouton bien nommé, et une confirmation qui s'entend
Le bouton d'ajout au panier doit être un véritable <button> au libellé explicite (« Ajouter au panier », idéalement avec le produit s'il y a plusieurs boutons sur la page), utilisable au clavier avec un focus visible (2.4.4, 2.1.1, 2.4.7). Surtout, comme l'ajout se fait souvent sans recharger la page (mini-panier, badge qui s'incrémente), la confirmation doit être annoncée par une région live : « Sac à dos ajouté au panier, 2 articles » (4.1.3). Une simple animation ou un changement de chiffre silencieux laisse la personne aveugle dans le doute : a-t-elle vraiment ajouté l'article ?
<button>Ajouter au panier</button> ; après le clic, un aria-live annonce « Article ajouté, 2 articles dans le panier ».<div> « Ajouter » non focusable ; un badge panier qui passe de 1 à 2 sans aucune annonce.→ Voir aussi les libellés de liens et boutons et le tunnel de commande.
Une note se lit, des étoiles ne se lisent pas
La note moyenne et les avis pèsent lourd dans la conversion : ils doivent être perceptibles autrement que par une rangée d'étoiles colorées. Donnez à la note un nom accessible textuel — « 4 sur 5 », « Noté 4 étoiles sur 5 » — via le contenu ou un aria-label, et n'exprimez pas la valeur uniquement par le remplissage des étoiles (1.1.1, 1.4.1). Les avis individuels doivent former une structure claire (titre, auteur, date, contenu), et tout système de filtre ou de tri des avis suit les mêmes règles que les autres contrôles (4.1.2, 1.3.1).
Récapitulatif : sur une fiche produit, tout est du socle
| Point à vérifier | Niveau | Statut EAA |
|---|---|---|
| Galerie : alternatives utiles, vignettes au clavier — 1.1.1 / 2.1.1 | A | Exigé |
| Variantes : vrais contrôles groupés, nom & état — 1.3.1 / 4.1.2 | A | Exigé |
| Prix & promo : pas la couleur seule — 1.4.1 | A | Exigé |
| Stock : en toutes lettres, changement annoncé — 1.4.1 / 4.1.3 | A · AA | Exigé |
| Ajout au panier : bouton nommé, confirmation annoncée — 2.4.4 / 4.1.3 | A · AA | Exigé |
| Note & avis : valeur en texte, pas étoiles seules — 1.1.1 / 4.1.2 | A | Exigé |
aria-pressed/aria-checked), et ne jamais confier le statut d'une variante à la seule couleur. C'est l'un des correctifs les plus rentables : il débloque l'étape exacte où se décide l'achat.
Comment vérifier votre fiche produit
Quelques contrôles concrets à mener directement sur une page produit :
- Choisissez une variante au clavier seul : peut-on sélectionner une taille et une couleur sans souris, avec un focus toujours visible ?
- Écoutez le sélecteur au lecteur d'écran : chaque coloris a-t-il un nom (« Bleu nuit ») ? l'option choisie est-elle annoncée comme sélectionnée ?
- Passez la page en niveaux de gris : le coloris choisi, le stock et le prix réduit restent-ils compréhensibles sans la couleur ?
- Ajoutez au panier et écoutez : la confirmation est-elle annoncée, ou seul le badge change en silence ?
- Inspectez la note : la valeur « 4 sur 5 » est-elle disponible en texte, ou n'y a-t-il que des étoiles ?
Une partie de ces points se prête à la détection automatique : un scanner repère une image sans alternative, un bouton sans nom accessible, un contraste insuffisant, un champ de formulaire non étiqueté. En revanche, savoir si l'ajout au panier est annoncé, si une variante épuisée est correctement signalée, ou si la note est lisible autrement qu'en étoiles demande un essai réel au clavier et au lecteur d'écran. Notre rapport signale les manquements détectables sur la page analysée et liste les vérifications manuelles à mener.
→ Méthode complète : comment tester l'accessibilité de son site. Voir aussi par où commencer.
Vérifiez l'accessibilité de votre boutique gratuitement
DeclareAccess analyse une page de votre site avec le moteur axe-core selon les WCAG 2.1 AA, repère les manquements (images sans alternative, boutons sans nom, contraste, structure…) et génère la déclaration d'accessibilité prête à publier — modèle français (RGAA), allemand (BFSG), italien ou espagnol. Gratuit, sans carte bancaire.
Rapport WCAG par e-mail sous 24 h ouvrées.
C'est noté. Votre demande d'audit est enregistrée — vous recevrez votre rapport WCAG par e-mail sous 24 h ouvrées.
Questions fréquentes
Une pastille de couleur peut-elle servir de sélecteur de coloris ?
Oui, à condition qu'elle soit un vrai contrôle accessible et pas une simple couleur. Chaque coloris doit être un bouton ou un bouton radio atteignable au clavier, porter un nom textuel (« Bleu nuit »), exposer son état (sélectionné ou non) et ne pas dépendre uniquement de la couleur pour être compris — c'est essentiel pour les personnes daltoniennes et au lecteur d'écran (critères 1.4.1 et 4.1.2, niveau A).
Comment afficher une promotion sans casser l'accessibilité ?
Le sens « ancien prix / prix réduit » ne doit pas reposer sur la seule couleur ou sur un simple effet barré visuel. Ajoutez une indication textuelle — « Ancien prix », « Prix réduit » — éventuellement appuyée par un balisage <del>/<ins>. Ainsi une personne daltonienne ou au lecteur d'écran sait quel montant s'applique (critère 1.4.1, niveau A).
Faut-il annoncer l'ajout au panier au lecteur d'écran ?
Oui. Quand l'ajout se fait sans rechargement de page, le changement doit être annoncé via une région live (aria-live ou role="status"), par exemple « Article ajouté, 2 articles dans le panier ». Sans cette annonce, une personne aveugle ne sait pas si son action a réussi : c'est le critère 4.1.3 (Messages d'état, niveau AA).
Comment rendre une note en étoiles accessible ?
La valeur de la note doit exister en texte, pas seulement sous forme d'étoiles colorées. Donnez-lui un nom accessible — « Noté 4 sur 5 » — via le contenu visible ou un aria-label, et traitez les étoiles comme un décor (par exemple aria-hidden). Ainsi la note est perceptible au lecteur d'écran et compréhensible sans distinction de couleur (critères 1.1.1 et 1.4.1, niveau A).
Une fiche produit peut-elle être conforme sans audit manuel ?
Un scan automatique détecte une bonne partie des manquements (image sans alternative, bouton sans nom, contraste, formulaire non étiqueté), mais pas tout : savoir si l'ajout au panier est annoncé, si une variante épuisée est correctement signalée ou si la note est lisible autrement qu'en étoiles demande un essai réel au clavier et au lecteur d'écran. La bonne approche combine un scan, quelques tests manuels ciblés, puis la déclaration d'accessibilité. Notre rapport réunit le détectable automatiquement et la liste des points à contrôler à la main.