Texte alternatif des images produit : le guide e-commerce
En bref — un bon texte alternatif d'image produit
Le texte alternatif (attribut alt) est la description lue par un lecteur d'écran à la place d'une image. C'est l'échec d'accessibilité le plus fréquent en e-commerce, et l'un des plus simples à corriger. Les règles essentielles :
- Toute image porteuse d'information a un texte alternatif : une photo produit sans
altest invisible pour un client aveugle ; - Décrivez le contenu utile de l'image, pas « image de » : nom du produit, couleur, matière, vue ;
- Une image purement décorative reçoit un
altvide (alt="") pour être ignorée ; - Le texte présent dans une image (bannière promo, tableau des tailles) doit être restitué dans l'
altou en texte réel ; - Dans une galerie ou des variantes, décrivez ce qui change (l'angle, la couleur), sans répéter mot pour mot ;
- Une image cliquable décrit sa destination, pas seulement l'image.
Bonus : un bon alt améliore aussi votre référencement dans Google Images.
Une fiche produit, c'est d'abord des images : la photo principale, les vues sous tous les angles, les swatches de couleur, le guide des tailles, les pictos « livraison offerte ». Pour un client qui utilise un lecteur d'écran, chacune de ces images est soit une information précieuse, soit du bruit — selon la qualité de son texte alternatif. Et c'est, de loin, le manquement le plus répandu : les images sans alt arrivent en tête des problèmes détectés sur les pages d'accueil les plus consultées du web.
Qu'est-ce que le texte alternatif, et pourquoi il compte
Le texte alternatif est le contenu de l'attribut alt d'une balise <img>. Il sert à trois publics : les personnes qui naviguent au lecteur d'écran (le logiciel lit l'alt à voix haute), celles dont l'image ne se charge pas (connexion lente, l'alt s'affiche à la place), et les moteurs de recherche, qui s'en servent pour indexer l'image. En matière d'accessibilité, c'est le critère WCAG 1.1.1 « Contenu non textuel », de niveau A — le plus fondamental, celui que la norme EN 301 549 (référence de l'European Accessibility Act) impose depuis le 28 juin 2025 aux services de commerce électronique.
La bonne nouvelle : contrairement à une refonte de site, ajouter ou corriger des textes alternatifs est un travail de contenu. Sur Shopify, WooCommerce ou PrestaShop, le champ « texte alternatif » se renseigne directement dans la bibliothèque d'images, sans toucher au code.
Les 6 règles d'un texte alternatif d'image produit
Toute image qui porte une information a un alt qui la décrit
La photo principale du produit, les vues détaillées, une image qui montre une fonction : chacune doit avoir un alt qui transmet l'information utile à l'achat. Décrivez ce qu'un client a besoin de savoir — pas chaque pixel.
alt="Sac à dos en cuir marron, vue de face, deux poches latérales"alt="image", alt="produit" ou alt="IMG_4821.jpg"Décrire l'utile, sans « image de » ni bourrage de mots-clés
Le lecteur d'écran annonce déjà « image » avant de lire l'alt : inutile de commencer par « Photo de… » ou « Image montrant… ». Visez une phrase courte et concrète. Et n'empilez pas les mots-clés SEO : une suite de termes sans phrase nuit autant à l'accessibilité qu'au référencement.
alt="Robe d'été fleurie bleue, longueur genou"alt="robe robe été femme pas cher robe bleue robe fleurie acheter robe"Ce qui n'apporte rien reçoit un alt vide
Une texture de fond, une icône purement esthétique à côté d'un libellé déjà écrit, un séparateur graphique : ces images sont décoratives. Leur attribut alt doit être présent mais vide (alt="") pour que le lecteur d'écran les ignore. Une image décorative sans attribut alt du tout, en revanche, fait souvent lire son nom de fichier à voix haute — le pire des deux mondes.
alt="" (ou CSS background-image)Restituer le texte affiché dans une image
Bannières promo (« -20 % jusqu'à dimanche »), tableau des tailles en image, étiquette « Nouveau », composition d'un produit sous forme d'infographie : si une image contient du texte porteur de sens, ce texte doit être accessible. Idéalement, présentez-le en vrai texte HTML (meilleur pour l'accessibilité, le SEO et le zoom) ; à défaut, reportez-le intégralement dans l'alt. Un guide des tailles en image sans équivalent texte est inutilisable pour une partie de vos clients.
alt="Soldes d'été : -20 % sur toute la collection jusqu'au 30 juin"Décrire ce qui change, sans tout répéter
Une fiche produit affiche souvent 4 à 8 images du même article. Donner à chacune un alt identique noie l'utilisateur sous la répétition. Décrivez plutôt l'angle ou le détail propre à chaque vue. Pour une vraie miniature qui ouvre une plus grande version, la miniature peut décrire la vue, et le zoom n'a pas besoin de répéter toute la description.
alt="…, vue de dos" / alt="…, gros plan sur la fermeture éclair" / alt="…, porté par un mannequin"Nommer la variante et la destination du lien
Les pastilles de couleur (swatches) qui changent la variante doivent annoncer le nom de la variante, pas sa forme : alt="Bleu marine", jamais alt="carré bleu". Et quand une image est elle-même un lien (vignette de catégorie, visuel cliquable), l'alt doit décrire où il mène, car c'est le seul texte que le lecteur d'écran associera au lien.
alt="Bleu marine" · vignette-lien : alt="Voir la collection Chaussures de running"Bons et mauvais textes alternatifs : exemples
| Image | À éviter | Recommandé |
|---|---|---|
| Photo produit | alt="image" | alt="Baskets blanches en toile, semelle crantée beige" |
| Nom de fichier brut | alt="DSC_0934.jpg" | alt="Montre analogique, bracelet cuir noir" |
| Image décorative | aucun attribut alt | alt="" (vide) |
| Bannière promo (texte) | alt="bannière" | alt="-20 % sur les manteaux jusqu'au 30 juin" |
| Swatch de couleur | alt="rond rouge" | alt="Rouge brique" |
| Vignette cliquable | alt="catégorie" | alt="Voir les sacs à main" |
alt (les imports en masse génèrent des alt="IMG_1234.jpg" inutiles) ; (2) transformer l'alt en réservoir de mots-clés pour le SEO. Les deux dégradent l'expérience au lecteur d'écran — et Google pénalise le bourrage. Une phrase descriptive et honnête sert à la fois l'accessibilité et le référencement.
Comment repérer vos images sans alt
Trois méthodes gratuites :
- Un scan automatique détecte de façon fiable les images sans attribut
altet lesaltvides sur des images informatives — c'est exactement le genre de manquement que les outils repèrent bien (axe-core, WAVE, Lighthouse). - Un lecteur d'écran (NVDA gratuit sur Windows, VoiceOver intégré sur Mac) vous fait entendre ce qui est annoncé : parcourez une fiche produit et écoutez si chaque image utile est décrite — et si les images décoratives se taisent.
- Le bon sens humain reste indispensable : un outil voit qu'un
altexiste, pas s'il est pertinent.alt="image"passe le test automatique mais ne décrit rien.
→ Méthode détaillée : comment tester l'accessibilité de son site. Les images font aussi partie de la checklist des 24 points.
Repérez vos images sans alt gratuitement
DeclareAccess analyse une page de votre boutique avec le moteur axe-core selon les WCAG 2.1 AA, liste les images sans texte alternatif et les autres manquements, puis 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 client e-mail va s'ouvrir avec la demande pré-remplie — il vous suffit de l'envoyer.
Questions fréquentes
Quelle longueur doit faire un texte alternatif ?
Une phrase courte et descriptive suffit dans la grande majorité des cas — généralement quelques mots à une ligne. L'objectif est de transmettre l'information utile à l'achat, pas de tout décrire. Si une image est complexe (infographie, schéma), donnez une brève description dans l'alt et l'explication détaillée en texte à proximité.
Faut-il un texte alternatif sur les images décoratives ?
Oui, mais un attribut alt vide : alt="". Cela indique au lecteur d'écran d'ignorer l'image. Ne pas mettre d'attribut alt du tout est différent — certains lecteurs d'écran liront alors le nom du fichier. Pour une image purement esthétique, préférez aussi un fond CSS (background-image), qui n'est jamais annoncé.
Le texte alternatif aide-t-il vraiment le référencement ?
Oui. Google utilise l'attribut alt pour comprendre et indexer vos images, ce qui aide votre visibilité dans Google Images et la pertinence de la page. La bonne nouvelle : un alt descriptif et honnête sert à la fois l'accessibilité et le SEO. À l'inverse, le bourrage de mots-clés nuit aux deux.
Mon thème Shopify / WooCommerce gère-t-il le alt tout seul ?
Non. La plateforme fournit le champ pour saisir le texte alternatif (dans la bibliothèque de médias ou la fiche produit), mais c'est à vous de le remplir avec une description utile. Par défaut, beaucoup de thèmes reprennent le titre du produit ou le nom de fichier, ce qui est rarement satisfaisant pour les vues secondaires. Voir accessibilité Shopify et WooCommerce.
Une IA peut-elle écrire mes textes alternatifs à ma place ?
Une IA peut proposer un premier jet utile pour des photos simples, mais elle ignore le contexte commercial (référence, matière exacte, variante) et se trompe sur les images ambiguës. Les générateurs d'alt automatiques des overlays produisent souvent des descriptions génériques ou fausses. Le plus fiable : une relecture humaine, surtout sur les images qui contiennent du texte ou qui servent de lien.