Un texte alternatif des images produit utile indique à la clientèle ce qu’apporte une image précise : l’apparence d’un produit, un détail présenté sous un autre angle ou la fonction d’une commande fondée sur une image. Le texte alternatif est une alternative textuelle qu’un logiciel, tel qu’un lecteur d’écran, peut utiliser pour décrire une image. Commencez par sa fonction sur la page, puis vérifiez le texte dans la boutique réelle après l’avoir enregistré.
Une galerie peut sembler claire alors que chaque image reprend le même nom de produit comme texte alternatif. La vue de face, le détail de la fermeture et la variante de couleur perdent alors leurs différences dans le texte. Nous proposons d’examiner la galerie d’un produit comme une petite tâche éditoriale : la personne chargée du catalogue vérifie le texte et la personne chargée de la boutique vérifie le résultat.
Pourquoi le texte alternatif des images produit perd des détails utiles
La description utile dépend du rôle de l’image et du contenu qui l’entoure. Les recommandations du W3C sur les images informatives demandent aux auteurs de transmettre les informations importantes dans ce contexte. Répéter un titre, un nom de fichier ou une expression de recherche dans toute une galerie peut omettre la caractéristique que la photo devait montrer. Remplir le champ ne constitue qu’une partie du travail.
Le nom du produit est jugé suffisant. Un nom identifie l’article, mais un gros plan peut ajouter un détail de fermeture ou de poche. Regardez ce que la photo apporte au-delà du titre et de la description voisine.
La fonction de l’image est négligée. Une photo peut aussi être un lien ou un bouton de galerie. Les recommandations du W3C sur les images fonctionnelles intègrent l’action ou la destination à la décision. Le nom accessible, c’est-à-dire le libellé qu’une technologie d’assistance reçoit pour cette commande, doit rendre sa fonction compréhensible.
La valeur enregistrée est considérée comme le résultat final. Traitez le champ d’administration et la page affichée comme deux points de contrôle distincts. En cas d’importation, d’image réutilisée ou de logique de thème personnalisée, examinez le rendu, c’est-à-dire ce que la page concernée de la boutique expose réellement, avant de modifier tout le catalogue.
Les recommandations de Google sur les images mettent également en garde contre le remplissage des alternatives avec des mots-clés. Écrivez pour le détail ou l’action dont la clientèle a besoin. Une liste de termes de recherche ne fournit pas cette explication.
Décidez de ce que chaque image apporte
Examinez l’image avec le texte environnant et tout lien ou bouton auquel elle appartient. Demandez-vous quelle information ou action deviendrait peu claire sans elle. L’arbre de décision du W3C distingue les usages informatifs, fonctionnels et décoratifs. Une image réutilisée ailleurs nécessite une nouvelle décision contextuelle. Une vue ultérieure de la galerie n’est pas automatiquement décorative parce que le nom du produit est déjà apparu.
Prenons une boutique fictive vendant un sac à bandoulière bleu. Ces exemples de formulation sont inventés et ne sont pas des descriptions vérifiées dans un catalogue réel.
| Emplacement | Décision à examiner |
|---|---|
| Vue de face | Décrivez l’apparence visible pertinente, par exemple un sac bleu avec un rabat courbe. |
| Gros plan sur la fermeture | Décrivez le détail visible de la fermeture apporté par cette vue. |
| Autre couleur | Adaptez la description à la photo et à la variante sélectionnée. |
| Commande de galerie composée uniquement d’une image | Rendez l’action de la commande compréhensible, par exemple ouvrir la vue de la fermeture. |
| Répétition purement décorative | Envisagez une alternative volontairement vide après avoir vérifié l’information et la fonction. |
Une alternative vide correspond à un attribut alt="" volontaire. Les recommandations du W3C sur les images décoratives distinguent ce choix de l’omission de l’attribut. Pour l’image d’une carte produit placée dans un lien, un texte suffisant au sein de ce même lien peut justifier une alternative vide. Un nom de produit distinct placé à proximité ne donne pas automatiquement son nom à un lien composé uniquement d’une image.
Présentez les informations détaillées de taille ou de montage comme un contenu de page accessible. Les recommandations du W3C sur les images complexes préconisent une explication textuelle plus complète lorsqu’une courte alternative ne peut pas transmettre l’information. Évitez de comprimer les instructions d’un schéma dans une brève description en supprimant le reste.
Rédigez et enregistrez un échantillon vérifié
Préparez un échantillon que vous pourrez contrôler avant d’appliquer la méthode à tout le catalogue. Nous utiliserions une fiche comprenant l’URL de la page, la langue, la variante sélectionnée, la référence de l’image, sa fonction, le texte proposé et le résultat de la vérification. Une vignette ou une référence média claire aide la personne chargée du contrôle à associer la ligne à l’image réelle sans faire de suppositions à partir d’un nom de fichier.
- Consignez l’apport de l’image. Notez ce dont la clientèle a besoin dans cette vue et ce que le texte voisin fournit déjà. Précisez si l’image fait partie d’un lien ou d’un bouton.
- Rédigez une brève alternative. Conservez le détail visible distinctif. Vérifiez la couleur et les autres faits pertinents à partir de la bonne photo et de la fiche du catalogue. Ne déduisez pas de l’apparence une matière, une capacité ou une certification.
- Examinez les suggestions avant de les accepter. Une description générée est un brouillon. Demandez à la personne chargée du produit de vérifier son contenu et sa fonction, y compris la variante sélectionnée et la langue.
- Vérifiez les valeurs existantes inexpliquées. Si le champ contient des codes de stock ou une mise en forme inhabituelle, demandez à la personne chargée de la maintenance si une logique de galerie personnalisée en dépend. Testez les modifications dans un aperçu autorisé ou sur un autre échantillon réversible avant de remplacer ces valeurs en masse.
- Enregistrez le texte dans le champ média pertinent. L’aide actuelle de Shopify pour ordinateur vous invite à ouvrir Produits, le produit, puis son élément média. Choisissez Ajouter un texte alternatif, saisissez le texte vérifié et sélectionnez Enregistrer le texte alternatif. Ce parcours concerne les médias produit. Les images intégrées aux descriptions ou aux sections du thème peuvent avoir un autre emplacement de modification.
- Transmettez les problèmes de mise en œuvre à la maintenance. Si le champ ou la commande ne permet pas d’exprimer la fonction requise, fournissez la page, la référence de l’image et le résultat attendu. Dans notre proposition de travail sur les sites e-commerce, cette transmission sépare la décision éditoriale de la modification du thème et de sa vérification.
Vérifiez la boutique avant de modifier le catalogue
Après l’enregistrement, ouvrez la page concernée de la boutique et vérifiez précisément l’emplacement modifié. Confirmez l’alternative de l’image, le nom accessible de toute commande à laquelle elle appartient et le comportement lors d’un changement de variante ou de vue de la galerie. Si vous ne pouvez pas effectuer ces contrôles, demandez à la personne chargée de la maintenance de comparer le résultat avec votre fiche avant d’étendre la modification.
- Identifiez l’image réelle. Utilisez les outils d’inspection du navigateur, ou demandez l’aide de la maintenance, pour lire l’attribut
altde l’image rendue. Comparez-le avec le texte préparé et la photo actuellement affichée. - Vérifiez le nom et l’action de la commande. Pour un lien ou un bouton, examinez le libellé transmis aux technologies d’assistance ainsi que l’alternative de l’image. Vérifiez que l’action ou la destination annoncée correspond à ce qui se produit lorsque vous activez la commande. La description de l’image seule peut ne pas déterminer le nom complet de la commande.
- Changez la vue et la variante. Ouvrez le détail de la fermeture, sélectionnez une autre couleur visible et vérifiez à nouveau le résultat correspondant. Si une description reste associée à la mauvaise image, consignez cette séquence exacte pour la maintenance.
- Rouvrez la page et la langue concernée. Vérifiez que la modification enregistrée est toujours présente à l’emplacement prévu. Consignez séparément les cas non résolus, notamment lorsqu’un processus d’importation ou de traduction doit être étudié.
L’inspection dans le navigateur vérifie la mise en œuvre. Une évaluation menée avec compétence à l’aide d’un lecteur d’écran peut examiner le parcours d’achat avec cette technologie d’assistance. Définissez clairement la portée de chaque évaluation. Les contrôles faciles du W3C avertissent que les vérifications préliminaires ne sont pas définitives. Ainsi, ni un champ rempli ni cet échantillon n’établissent l’accessibilité de toute la boutique. Nos premiers contrôles d’accessibilité de votre site couvrent des tâches plus larges, comme l’utilisation du clavier et les formulaires.
Maintenez les alternatives après la modification
Attribuez la responsabilité du texte source et répétez le contrôle pertinent lorsque la photo, la variante, la langue, le thème ou l’importation change. Si plusieurs systèmes alimentent le catalogue, déterminez lequel gère le champ. Nous inclurions cette correspondance dans un processus d’intégration du catalogue et du CRM avant d’étendre des modifications manuelles qu’un autre processus pourrait remplacer.
Suivez les emplacements vérifiés, les textes confirmés dans la boutique et les cas non résolus. Ces relevés montrent le travail effectué et les points qui demandent encore une intervention. Ils ne mesurent pas un effet sur les ventes. Conservez ensemble la référence de l’image, le texte actuel, la personne chargée de l’édition et le déclencheur du prochain contrôle afin qu’une autre personne puisse maintenir la même décision.
Notre intervention
Nous commencerions par les différentes vues d’un produit et conviendrions de ce que chacune doit communiquer. La transmission relie ensuite le texte éditorial à l’emplacement d’enregistrement, au rendu dans la boutique et à tout comportement de commande non résolu. Commencez votre propre fiche avec un produit dont la galerie montre des détails distincts et vérifiez l’échantillon avant d’étendre le travail.
