Aller au contenu

Vérificateur d'alt text d'images

Réponse courte

Trouvez les images sans alt text et vérifiez les attributs alt existants.

Ce qu’il ne fait pas: Il vérifie si le texte alternatif est présent, vide ou un nom de fichier, pas s’il décrit bien l’image ; les images ajoutées par des scripts ou définies en arrière-plan CSS ne sont pas incluses.

Gratuit · Sans inscription · Fonctionne dans votre navigateur
100 % dans votre navigateur — votre contenu ne quitte jamais votre appareil.

Ce que ça fait

Analyse chaque `<img>` de la page et valide la présence du texte alternatif, le marquage des images décoratives via un `alt=""` vide, et les modèles d'alt reprenant le nom de fichier (texte alternatif qui se contente de répéter le nom du fichier image). Renvoie une liste des images nécessitant une attention particulière.

Pourquoi c'est important

Le texte alternatif est ce qui permet aux utilisateurs de lecteurs d'écran de savoir ce que montre une image, et le critère WCAG 1.1.1 exige une alternative textuelle pour chaque image porteuse de sens. Google utilise également le texte alternatif, avec le contexte de la page, pour comprendre les images destinées à Google Images. Un texte alternatif manquant échoue au premier groupe et laisse moins d'éléments au second.

Comment ça fonctionne

  1. Saisissez l'URL d'une page ou collez son code HTML

  2. Nous lisons chaque élément `<img>` et son attribut alt dans le HTML

  3. Exécutez les règles de qualité : alt manquant, alt vide (décoratif), et alt reprenant le nom de fichier

  4. Renvoyez la couverture du texte alternatif ainsi qu'une liste des images sans texte alternatif approprié

Exemple d'entrée et de sortie

ENTRÉE
url: https://web.dev/articles/vitals
SORTIE
images : 9
  avec alt : 8
  alt vide (décoratives) : 1
  alt manquant : 0                          OK
  alt = nom de fichier : 0                  OK

Couverture : 100 %

Comment lire le résultat

Images (9 dans l'exemple)
Chaque élément <img> du HTML envoyé par votre serveur. Les images en arrière-plan CSS, dessinées en SVG ou ajoutées plus tard par un script ne sont pas comptées.
Alt manquant (0)
Les images sans aucun attribut alt. Les lecteurs d'écran lisent alors souvent le nom du fichier ou disent seulement « image », et le critère WCAG 1.1.1 n'est pas respecté. C'est ce nombre qui fait baisser le score.
Alt vide (1)
Les images avec alt="". C'est correct pour une image purement décorative et faux pour une image porteuse d'information. L'outil ne peut pas les distinguer : il affiche donc le nombre sans verdict — examinez chacune.
L'alt n'est que le nom du fichier
Un texte alternatif qui reprend le nom du fichier, comme « hero-banner-2 » ou « IMG_0423 », n'apprend rien à personne. Il reçoit un avertissement même si l'attribut est présent.
Couverture (100 %)
La part des images qui ont un attribut alt, vide ou non. 100 % signifie qu'aucun ne manque ; cela ne signifie pas que chaque texte est bon, car l'outil ne peut pas juger si un alt décrit son image.
Images à corriger
Sous les chiffres, le rapport liste jusqu'à huit images sans alt par nom de fichier, pour les retrouver dans votre modèle ou votre médiathèque.

Qui l'utilise

  • Responsable e-commerce

    Vérifiez les pages produit à la recherche d'images sans texte alternatif ou avec le nom de fichier comme texte alternatif, un défaut courant de catalogue.

  • Auditeur en accessibilité

    Vérifiez la couverture du texte alternatif WCAG 1.1.1 page par page et listez chaque image sans attribut alt.

  • Éditeur de contenu

    Vérifiez chaque page que vous publiez pour repérer les images téléversées sans texte alternatif avant qu'elles ne s'accumulent.

Problèmes fréquents et comment les corriger

  1. Images de contenu sans alt

    Écrivez ce que l'image montre d'important pour cette page : « Chaussure de trail rouge, vue de profil » sur une fiche produit, la tendance d'un graphique dans un rapport. Tenez-vous à une phrase ; les descriptions plus longues vont dans le texte ou une légende.

    <img src="/signups.png" alt="Bar chart: sign-ups doubled from March to June">
<img src="/divider.svg" alt="">

  2. Le CMS ajoute des images sans alt

    La plupart des systèmes de contenu ont un champ alt dans la médiathèque : rendez-le obligatoire pour les rédacteurs et affichez-le dans le modèle au lieu d'omettre l'attribut. Pour les images décoratives, faites écrire alt="" explicitement par le modèle.

  3. Icônes et logos

    Une icône à côté d'un libellé texte est décorative : alt="". Une icône qui est le seul contenu d'un bouton ou d'un lien a besoin d'un alt qui nomme l'action (« Rechercher », « Fermer le menu »). Un logo qui mène à l'accueil a besoin du nom de l'organisation, pas de « logo ».

    <a href="/"><img src="/logo.svg" alt="Example Ltd – home"></a>
<button type="button"><img src="/icons/search.svg" alt="Search"></button>
<img src="/icons/check.svg" alt=""> In stock

  4. Alt bourré de mots-clés

    Les consignes de Google sur les images mettent en garde contre les attributs alt remplis de mots-clés. Décrivez l'image ; citez le sujet une fois, naturellement, s'il est vraiment dans l'image.

  5. Graphiques et images complexes

    Donnez à l'alt un court résumé, comme « Diagramme en barres : les inscriptions ont doublé de mars à juin », et mettez les chiffres complets dans le texte de la page ou un tableau à côté, pour que tout le monde y ait accès.

Questions fréquentes

Quand le texte alternatif doit-il être vide ?
Pour les images décoratives qui n'apportent aucune valeur informationnelle (motifs d'arrière-plan, séparateurs). Utilisez `alt=""` pour que les lecteurs d'écran les ignorent. Ne supprimez jamais complètement l'attribut.
Qu'est-ce qu'un bon texte alternatif ?
Une courte phrase qui décrit ce que montre l'image et pourquoi elle est présente. Évitez « image de » ou « photo de », et n'utilisez un mot-clé que là où il décrit réellement l'image.
Comment Google utilise-t-il le texte alternatif ?
Google utilise le texte alternatif, avec le contenu de la page, pour comprendre ce que montre une image, ce qui l'aide à la présenter dans Google Images. Les assistants IA qui lisent une page peuvent l'utiliser de la même manière.
Qu'en est-il des légendes de figures ?
Les légendes (`<figcaption>`) complètent le texte alternatif mais ne le remplacent pas. Les deux doivent décrire l'image ; l'alt est destiné aux lecteurs d'écran, la légende aux utilisateurs voyants.

Sources

La documentation sur laquelle reposent cet outil et les explications de cette page.

Outils gratuits sur ce sujet

Guides sur ce sujet

Données d’étude sur ce sujet

Outils connexes dans Analyse SEO

Voir tous les outils Analyse SEO