Les images produit doivent avoir un texte alternatif pertinent
Les clients aveugles comptent sur le texte alternatif pour savoir à quoi ressemble un produit. Un nom de fichier comme « IMG_4021_final.jpg », une description vide ou le même texte sur chaque image de la galerie ne leur dit rien de la couleur, de la coupe ou des détails : ils ne peuvent pas choisir en confiance et achètent ailleurs.
- Identifiant de la règle
- vs-product-images
- Source
- Contrôle Validiscan
- Impact
- Grave
- Niveau de correction
- ASSISTED
- sur Shopify, Shopware, WooCommerce et Magento
- Statut
- exécutée
Ce que fait le contrôle
Signale dans les images produit les textes alternatifs identiques au nom de fichier, un alt vide sur l’image principale du produit, un même alt répété sur toutes les images d’une galerie, les textes alternatifs de plus de 150 caractères et les préfixes redondants comme « image de » ou « photo de » (1.1.1).
Le contrôle lit les éléments img et ceux qui portent role="img", en ignorant ceux qui se trouvent dans un élément aria-hidden="true" ou dans des diapositives de carrousel clonées. Un élément img sans alt est laissé à la règle image-alt d’axe-core.
- Nom de fichier : le texte alternatif est identique au nom de fichier tiré de
src, dedata-srcou de la première entrée desrcsetou, si ce nom contient des chiffres, des traits d’union ou des tirets bas, identique à ce nom sans extension ni suffixe de taille (_1024x1024). Un texte alternatif qui se termine par une extension d’image ou qui ressemble àIMG_1234compte aussi. - Image principale (fiches produit) : le plus grand élément
imgvisible d’au moins 10 000 pixels CSS carrés qui commence à moins de 1,5 hauteur de zone d’affichage du haut de la page, dans un conteneur de produit ou de galerie, sinon dans la première hauteur de zone d’affichage. Les images de l’en-tête, de la navigation et du pied de page ne peuvent jamais être l’image principale ;role="presentation"ou"none"compte comme vide, même sansalt. - Galerie : dans le conteneur le plus proche qui contient au moins trois images affichées avec un
alt, au moins trois images de fichiers différents ont le même texte alternatif. - Générique : le texte alternatif n’est qu’un mot comme « photo » ou « icon ».
Le contrôle ne juge pas si le texte décrit l’image.
Comment corriger
Rédigez pour chaque image produit un texte alternatif court et précis qui dit ce que montre cette image (couleur, angle de vue, détail), gardez-le sous 150 caractères environ, n’écrivez pas « image de », et faites en sorte que les textes d’une même galerie soient différents. La plupart des plateformes enregistrent le texte alternatif de chaque image produit dans l’interface d’administration ; assurez-vous que le thème l’affiche dans la page au lieu du nom de fichier ou du titre du produit.
Critères de succès WCAG
- 1.1.1 Non-text Content, niveau A
Clauses de la norme EN 301 549
| Critère WCAG | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 1.1.1 | 9.1.1.1 | 9.1.1.1 |
Commencez par une vérification gratuite de votre boutique.
Envoyez l’adresse de votre boutique. Validiscan la scanne et vous envoie chaque échec que le scan peut prouver, avec sa page et son code.
Demander une vérification gratuiteOu écrivez à info@validiscan.com.
Ce que couvre la vérification gratuite, et ce qu’elle laisse de côté- Vous envoyez
- l’adresse de votre boutique
- Pages scannées
- jusqu’à 15
- Vous recevez
- chaque échec que le scan peut prouver, avec la page et le code
- Sur votre boutique
- pages publiques uniquement ; aucune connexion, aucun achat, aucun formulaire envoyé
- Ce qu’elle n’est pas
- un audit complet