Texte alternatif des images

Ce que vérifie ce contrôle

Compte les éléments <img> et combien d’entre eux ont un attribut alt non vide. Renvoie le ratio.

Pourquoi c’est important

Le texte alt sert trois publics :

• Les lecteurs d’écran lisent le texte alt à voix haute aux utilisateurs aveugles et malvoyants. Sans cela, l’utilisateur entend « image » ou le nom de fichier — inutile. C’est aussi exigé par la loi dans l’UE en vertu de l’Accessibility Act (juin 2025).
• Google Images classe les images en partie sur le texte alt. Un alt bien rédigé est l’un des signaux les plus forts pour la visibilité en recherche d’images.
• Les robots IA ne savent pas (encore) comprendre fiablement le contenu des images. Ils s’appuient sur le texte alt pour savoir ce que l’image montre.

Il y a aussi un quatrième : quand une image échoue à charger, l’alt est ce que voit votre utilisateur à la place de l’icône d’image cassée.

Comment le corriger

Ajoutez un alt descriptif à chaque image qui porte du sens :

<img src="/hero.webp" alt="Rapport d'audit MetricSpot affichant un score de 87/100 avec ventilation par module" />

Règles :

• Décrivez ce qui est dans l’image, pas « image de ». Les lecteurs d’écran annoncent déjà « image ».
• Soyez précis. alt="rapport" est inutile. alt="Rapport PDF MetricSpot avec score 87" est utile.
• Pas de bourrage de mots-clés. N’écrivez pas alt="audit SEO outil SEO rapport SEO". Google pénalise cela et les lecteurs d’écran détestent.
• Pour les images décoratives, utilisez alt="" (vide, pas absent). Les lecteurs d’écran sautent les alt vides. S’applique aux motifs de fond, icônes de séparation, etc.

Aides selon le framework :

• Next.js <Image> : alt est une prop requise.
• MDX/Markdown : l’alt est entre crochets — ![voici l'alt](image.jpg).

Questions fréquentes

Et pour les logos ?

Les logos qui sont aussi des liens (ex. logo dans l’en-tête qui lie vers l’accueil) doivent décrire la destination : alt="Accueil MetricSpot" ou alt="MetricSpot". Les logos autonomes dans un pied de page peuvent utiliser alt="Logo MetricSpot".

Faut-il ajouter un alt aux images de fond CSS ?

Les images de fond CSS sont totalement inaccessibles aux lecteurs d’écran. Si l’image porte de l’information, utilisez un <img> avec alt. Si elle est purement décorative, un background CSS convient.

L’attribut title est-il un substitut ?

Non. title apparaît en infobulle au survol mais est ignoré par la plupart des lecteurs d’écran et de nombreux appareils tactiles. Utilisez toujours alt.