Aller au contenu principal
Mynto
AccessibiliteRGAA 1.1Niveau AImages

Image sans alternative textuelle (alt manquant)

Une image qui porte de l'information doit avoir une alternative textuelle. Sans elle, un lecteur d'écran annonce un blanc, ou pire, le nom du fichier. C'est le critère RGAA 1.1, niveau A, et l'erreur d'accessibilité la plus répandue sur le web.

C'est quoi

L'attribut alt d'une balise <img> fournit une description textuelle de l'image. Les lecteurs d'écran le lisent à voix haute. Sans cet attribut, l'utilisateur aveugle ne sait pas ce que l'image montre.

Trois cas à distinguer :

  • Image porteuse d'information (photo produit, graphique, logo cliquable) : l'alt doit décrire l'information utile.
  • Image de décoration (séparateur, fond) : l'alt doit être vide (alt="") pour que le lecteur d'écran l'ignore.
  • Image dans un lien : l'alt doit décrire la destination du lien, pas l'image.

L'erreur courante n'est pas seulement l'alt absent. Un alt qui reprend le nom du fichier (alt="IMG_4821.jpg") est tout aussi inutile.

Qui est touché

  • Les personnes aveugles ou malvoyantes qui utilisent un lecteur d'écran (NVDA, JAWS, VoiceOver).
  • Les personnes avec une connexion lente, quand l'image ne charge pas : l'alt s'affiche à la place.
  • Les robots d'indexation, qui lisent l'alt pour comprendre et référencer l'image.

Impact business

Une partie des visiteurs utilise un lecteur d'écran : personnes aveugles ou fortement malvoyantes. Sur une image produit sans alt dans un tunnel d'achat, ces utilisateurs ne savent pas ce qu'ils achètent.

L'enquête WebAIM Million place les images sans alternative parmi les erreurs WCAG les plus fréquentes : elle en détecte sur une large majorité des pages d'accueil analysées chaque année.

Formule à appliquer à tes propres chiffres : visiteurs mensuels x part d'utilisateurs de technologies d'assistance = audience directement bloquée par chaque image décisionnelle sans alternative.

Sources des chiffres

Comment le détecter

  • Audit Mynto : le scan détecte les <img> sans alt, les alt vides sur des images informatives, et les alt qui reprennent le nom du fichier.
  • Manuel : pour chaque image, demande-toi « si je la retire, l'utilisateur perd-il de l'information ? ». Si oui, l'alt doit fournir cette information.
  • Lecteur d'écran : active VoiceOver (Mac) ou NVDA (Windows) et parcours la page. Tu entends ce que l'utilisateur entend.

Comment corriger

Avant - HTML
<img src="/produits/chaise-bureau.jpg">
<img src="/decoration/ligne.svg" alt="ligne.svg">
Après - HTML
<img src="/produits/chaise-bureau.jpg"
     alt="Chaise de bureau ergonomique grise, accoudoirs réglables">
<img src="/decoration/ligne.svg" alt="">

Pour l'image produit, l'alt décrit ce que l'utilisateur a besoin de savoir pour décider. Pour l'image décorative, l'alt vide (alt="") dit au lecteur d'écran de l'ignorer. Ne jamais supprimer l'attribut : un alt absent et un alt vide ne produisent pas le même comportement.

Sur WordPress, l'alternative se renseigne dans la médiathèque, champ « Texte alternatif ». Le plugin Mynto peut corriger au rendu les alt manquants les plus simples, mais une alternative pertinente reste à rédiger par un humain.

Questions fréquentes

Une image décorative doit-elle avoir un alt vide ou pas d'alt du tout ?

Un alt vide (alt=""). Le lecteur d'écran l'ignore proprement. Sans attribut alt, certains lecteurs lisent le nom du fichier à la place.

Le texte alternatif a-t-il un effet sur le référencement ?

Oui. Les moteurs de recherche utilisent l'alt pour comprendre et indexer l'image. Mais le rôle premier de l'alt reste l'accessibilité, pas le SEO : décris l'image, ne la bourre pas de mots-clés.

À lire aussi

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.