Comment vérifier si une image a un texte alternatif (4 méthodes simples)

Pourquoi le texte alternatif est important

Le texte alternatif (texte de remplacement) est une courte description écrite ajoutée à une image en HTML via l'attribut alt. Il remplit deux fonctions essentielles : il permet aux lecteurs d'écran de décrire les images aux utilisateurs malvoyants et il donne aux moteurs de recherche le contexte nécessaire pour comprendre ce que représente une image.

Selon la norme WCAG 1.1.1 (Contenu non textuel), toutes les images significatives doivent avoir un texte alternatif descriptif pour atteindre la conformité de niveau A. L'absence de texte alternatif ou un texte alternatif vide sur les images informatives est l'une des violations d'accessibilité les plus courantes sur le web aujourd'hui.

Alors, comment vérifier si une image a un texte alternatif ? Voici quatre méthodes fiables.

Méthode 1 : Inspecter le code source de la page (Afficher le code source)

Le moyen le plus simple de vérifier le texte alternatif est d'afficher le code HTML brut d'une page web :

1. Ouvrez la page dans votre navigateur.
2. Faites un clic droit n'importe où et sélectionnez Afficher le code source de la page (ou appuyez sur Ctrl+U / Cmd+U).
3. Utilisez Ctrl+F / Cmd+F pour rechercher <img.
4. Pour chaque balise d'image, recherchez l'attribut alt. Par exemple : <img src="photo.jpg" alt="Une femme lisant un livre dans une bibliothèque">

Si l'attribut alt est complètement absent, ou s'il est présent mais vide (alt=""), cette image peut nécessiter une attention particulière. Notez que alt="" est intentionnellement utilisé pour les images décoratives qui n'ont pas de signification — ceci est valide et correct selon les WCAG.

Méthode 2 : Utiliser les outils de développement du navigateur (Inspecter l'élément)

Pour une approche plus rapide et plus visuelle, utilisez les outils de développement intégrés à votre navigateur :

1. Faites un clic droit directement sur l'image que vous souhaitez vérifier.
2. Sélectionnez Inspecter ou Inspecter l'élément.
3. Le panneau des outils de développement s'ouvrira avec le code HTML de l'image mis en surbrillance.
4. Recherchez l'attribut alt dans la balise <img> mise en surbrillance.

Cette méthode est particulièrement utile lorsque vous souhaitez vérifier rapidement une image spécifique sans avoir à parcourir tout le code source de la page. Vous pouvez également survoler l'élément image dans le panneau des éléments pour voir un aperçu, et la valeur alt sera visible en ligne.

Méthode 3 : Utiliser l'outil d'accessibilité WAVE

L'outil d'évaluation de l'accessibilité web WAVE (disponible en tant qu'extension de navigateur gratuite ou sur wave.webaim.org) fournit une superposition visuelle sur votre page qui signale les problèmes d'accessibilité, y compris les textes alternatifs manquants.

1. Installez l'extension de navigateur WAVE (Chrome ou Firefox).
2. Accédez à la page que vous souhaitez vérifier.
3. Cliquez sur l'icône de l'extension WAVE.
4. WAVE superposera des icônes sur la page — une icône rouge marquée d'un point d'exclamation indique une erreur de texte alternatif manquant sur une image.
5. Cliquez sur n'importe quelle icône pour plus de détails sur le problème spécifique.

WAVE affiche également un décompte récapitulatif des erreurs, ce qui permet de voir facilement en un coup d'œil combien d'images sur la page n'ont pas de texte alternatif.

Méthode 4 : Utiliser Alt Audit pour une vérification sur l'ensemble du site

Les trois méthodes ci-dessus sont excellentes pour vérifier des images ou des pages individuelles, mais que faire si vous devez auditer l'intégralité de votre site web en une seule fois ? C'est là qu'intervient Alt Audit.

Alt Audit analyse l'ensemble de votre site et génère un rapport complet de chaque image qui n'a pas de texte alternatif, qui a un attribut alt vide (là où il ne devrait pas l'être), ou qui a un texte alternatif potentiellement trop court, trop long, ou généré automatiquement. Cela permet d'économiser des heures de travail manuel et vous donne une liste d'actions prioritaires pour résoudre vos problèmes d'accessibilité.

Avec Alt Audit, vous pouvez :

• Analyser des milliers d'images sur l'ensemble de votre domaine en quelques minutes.
• Voir exactement quelles pages et quelles images n'ont pas de texte alternatif.
• Utiliser des suggestions basées sur l'IA pour générer automatiquement des textes alternatifs descriptifs.
• Suivre vos progrès au fil du temps à mesure que vous résolvez les problèmes.

Qu'est-ce qui fait un bon texte alternatif ?

Une fois que vous avez identifié les images sans texte alternatif, vous voudrez rédiger des descriptions efficaces. Voici à quoi ressemble un bon texte alternatif :

• Soyez descriptif et précis : « Petit chiot golden retriever jouant dans les feuilles d'automne » est bien mieux que « chien » ou « photo ».
• Soyez concis : Visez moins de 125 caractères. Les lecteurs d'écran peuvent couper les textes alternatifs plus longs.
• Ne commencez pas par « Image de » ou « Photo de » : Les lecteurs d'écran annoncent déjà qu'il s'agit d'une image. Décrivez simplement ce qu'elle montre.
• Tenez compte du contexte : La même image peut nécessiter un texte alternatif différent selon le contenu environnant. Un graphique sur une page de données doit décrire la tendance des données, pas seulement « graphique à barres ».
• Utilisez un texte alternatif vide pour les images décoratives : Si une image est purement décorative et n'apporte aucune information, utilisez alt="" pour indiquer aux lecteurs d'écran de l'ignorer.

Erreurs courantes de texte alternatif à éviter

Lors de l'audit de vos images, faites attention à ces erreurs fréquentes :

• Attribut alt complètement absent : Certains anciens systèmes de gestion de contenu (CMS) ou plugins tiers peuvent générer des balises <img> sans aucun attribut alt.
• Nom de fichier comme texte alternatif : Un texte alternatif comme « IMG_4823.jpg » ou « banniere-image-v2-final.png » n'est utile pour personne.
• Bourrage de mots-clés : Charger le texte alternatif avec des mots-clés à des fins de référencement (« meilleures chaussures pas chères acheter chaussures en ligne chaussures pas cher ») est une mauvaise pratique d'accessibilité et peut être pénalisé par les moteurs de recherche.
• Texte alternatif identique sur différentes images : Si plusieurs images sur une page ont le même texte alternatif, les utilisateurs de lecteurs d'écran ne pourront pas les distinguer.

Commencez à vérifier votre texte alternatif dès aujourd'hui

Que vous soyez développeur, gestionnaire de contenu ou spécialiste SEO, savoir comment vérifier si une image a un texte alternatif est une compétence fondamentale pour créer des sites web accessibles et performants.

Pour une solution rapide, complète et évolutive, Alt Audit vous offre une visibilité totale sur la couverture du texte alternatif de votre site — afin que vous puissiez résoudre les problèmes plus rapidement et rester conforme aux normes WCAG.