Ce que vérifie cette règle
Vérifier que les éléments <img> ont une alternative textuelle, ou un rôle de type 'none' ou 'presentation'.
Pourquoi c’est important
Le critère WCAG 1.1.1 exige une alternative textuelle pour les images porteuses de sens. Sans elle, un utilisateur de lecteur d’écran ne peut pas savoir quel produit montre une photo.
Comment corriger
Sur n’importe quel site web
- Ajoutez une description courte et précise dans le texte alternatif de chaque image, dans votre CMS ou votre modèle.
- Décrivez ce qui compte pour un client : le nom du produit, la couleur et l’angle de vue (par exemple « Sac cabas en toile olive, vue de face »).
- Les images décoratives doivent avoir un attribut alt vide (alt="") pour que les lecteurs d’écran les ignorent.
Sur Shopify
- Dans l’administration Shopify, ouvrez Produits > [produit] > Media, cliquez sur chaque image et renseignez « Texte alternatif ». Pour les images des sections, ouvrez Boutique en ligne > Thèmes > Personnaliser et définissez le texte alternatif de l’image dans les paramètres de la section.
- Décrivez ce qui compte pour un client : le nom du produit, la couleur et l’angle de vue (par exemple « Sac cabas en toile olive, vue de face »).
- Les images décoratives doivent avoir un attribut alt vide (alt="") pour que les lecteurs d’écran les ignorent.
Sur WooCommerce et WordPress
- Dans WordPress, ouvrez Médias > Bibliothèque, sélectionnez chaque image et renseignez « Texte alternatif ». Les images de la galerie produit utilisent le même champ.
- Décrivez ce qui compte pour un client : le nom du produit, la couleur et l’angle de vue (par exemple « Sac cabas en toile olive, vue de face »).
- Les images décoratives doivent avoir un attribut alt vide (alt="") pour que les lecteurs d’écran les ignorent.
Comment vérifier la correction
- Analysez à nouveau les pages concernées.
- Utilisez un lecteur d’écran (VoiceOver : Cmd+F5 sur Mac) pour entendre comment les images produit sont annoncées.
Comment FixReports le détecte
Notre analyse exécute la règle axe-core image-alt dans un vrai navigateur Chrome sur chaque page testée, et signale chaque élément en échec avec sa page, son balisage et, le cas échéant, une capture d’écran.
Un test automatisé confirme la présence de ce problème précis. Il ne peut pas dire si le reste de la page est accessible : certains obstacles n’apparaissent que lorsqu’une personne vérifie la page.