# Les images doivent avoir une alternative textuelle

<https://www.fixreports.com/fr/issues/image-alt>

WCAG 1.1.1 Contenu non textuel · Niveau A

Des images n’ont pas d’alternative textuelle : les utilisateurs de lecteurs d’écran ne savent donc pas ce qu’elles montrent.

## 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
1. Ajoutez une description courte et précise dans le texte alternatif de chaque image, dans votre CMS ou votre modèle.
2. 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 »).
3. Les images décoratives doivent avoir un attribut alt vide (alt="") pour que les lecteurs d’écran les ignorent.

### Sur Shopify
1. 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.
2. 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 »).
3. Les images décoratives doivent avoir un attribut alt vide (alt="") pour que les lecteurs d’écran les ignorent.

### Sur WooCommerce et WordPress
1. 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.
2. 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 »).
3. 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.

## Sources
- Documentation de la règle axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Comprendre le critère WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content