Shopify : textes alternatifs des images produit

Décrivez ce que cette image apporte au client

Sur une fiche produit, une photo informative demande une description courte de ses informations essentielles. Précisez la couleur, la vue ou un détail visible qui aide à choisir. Ne répétez pas toute la fiche et ne décrivez pas chaque élément du décor.

Le contexte compte. Un titre produit voisin ne décrit pas forcément une fermeture, une coupe ou une vue arrière. Une image purement décorative, ou entièrement redondante dans ce contexte, utilise un attribut alt vide : alt="". Un attribut absent n’est pas équivalent.

Si une image constitue seule un lien, son alternative doit identifier la destination. Pour une commande illustrée, elle doit expliquer l’action. Quand une image et un nom produit suffisant partagent le même lien, une alternative vide peut éviter une répétition inutile.

Cette dernière règle suppose que l’image n’ajoute aucune information utile. Un autre lien placé à côté ne nomme pas automatiquement le lien de l’image. Vérifiez chaque emplacement : fiche produit, carte de collection et galerie peuvent demander des traitements différents.

Adaptez ces exemples fictifs

Ces produits et descriptions sont inventés pour expliquer la méthode. Aucun exemple ne provient d’un client ou d’un scan réel. Utilisez seulement des caractéristiques confirmées et des détails réellement visibles sur votre image.

Photo informative : « Chemise bleu marine, vue de face ». Photo de détail : « Gros plan de la poche latérale zippée du sac à dos ». Ces alternatives distinguent des vues sans répéter le prix ou les arguments commerciaux.

Lien composé uniquement d’une photo : « Chemise bleu marine », si ce texte identifie suffisamment le produit de destination. Commande de galerie illustrée : « Agrandir la vue arrière ». Ce dernier texte décrit l’action ; il ne remplace pas la description de la grande photo.

Évitez les noms de fichiers, les listes de mots-clés et les qualités supposées, comme « imperméable », sans justification. « Image de » est généralement inutile. Shopify recommande 125 caractères ou moins et autorise jusqu’à 512 caractères. Ce conseil de longueur n’est pas une limite WCAG.

Enregistrez le texte sur le média produit Shopify

Dans l’administration Shopify sur ordinateur, ouvrez Produits, puis le produit concerné. Cliquez sur son support multimédia pour ouvrir Aperçu du support multimédia. Choisissez Ajouter un texte alternatif, saisissez votre description, puis Enregistrer le texte alternatif. Fermez l’aperçu avec X.

Répétez l’opération pour chaque photo informative et chaque vue utile d’une variante. Les images ajoutées dans les sections du thème ont un réglage séparé. Ne confondez pas leur éditeur avec celui des médias produit.

Enregistrer une description ne prouve pas que tous les emplacements l’utilisent. Pour une image décorative, demandez au développeur de confirmer que le HTML final contient bien alt="". Un champ laissé vide peut être remplacé par un titre dans le thème.

Vérifiez ce que le thème rend réellement

Ouvrez la fiche produit et la collection sur ordinateur et téléphone. Dans les outils de développement du navigateur, inspectez chaque image et son attribut alt. Comparez le texte rendu à la photo et aux informations déjà présentes autour.

Shopify expose la description dans image.alt. Le filtre Liquid image_tag peut utiliser le texte du média ou un titre selon la ressource. Un paramètre alt explicite peut remplacer cette valeur. Votre développeur doit vérifier les substitutions et le HTML des images codées autrement.

Changez de variante et ouvrez les vues de détail. Vérifiez que les descriptions correspondent encore aux photos affichées. Testez séparément le nom accessible des liens et boutons : une bonne description de photo ne nomme pas forcément sa commande de galerie.

Parcourez la galerie avec Tab et Maj+Tab, puis les touches adaptées aux commandes. Le focus doit rester visible et les actions utilisables. Avec un lecteur d’écran, écoutez les descriptions et les noms des commandes pour repérer les répétitions ou les actions incompréhensibles.

Si la boutique propose plusieurs langues, vérifiez chaque version publique. La présence d’une traduction dans ce guide ne signifie pas que Shopify traduit automatiquement vos alternatives. Après une correction ou une mise à jour du thème, refaites ces vérifications.

Séparez détection automatique et pertinence humaine

Un outil automatisé peut repérer un attribut alt manquant. Il ne détermine pas à lui seul si la description aide un client dans ce contexte. Cette décision demande de voir l’image, de lire son environnement et de comprendre son rôle.

Le scan gratuit de Pervia fournit une première liste de problèmes sur les pages publiques qu’il peut vérifier. Il ne charge pas les images et ne juge pas la pertinence visuelle de leurs descriptions. Les correctifs proposés restent des modèles à adapter et tester.

Un Score élevé ne prouve ni une accessibilité complète ni une conformité juridique. Gardez votre revue humaine des descriptions et du parcours d’achat, même après un contrôle automatisé sans problème détecté.