Pourquoi le texte alternatif manque
Un texte alternatif manquant est rarement volontaire. Les causes habituelles :
- Des téléversements CMS sans champ obligatoire. La plupart des éditeurs de contenu permettent de publier une image sans jamais demander de texte alternatif, qui reste alors vide par défaut.
- Du balisage copié-collé. Une balise
<img>copiée depuis une autre partie du site (ou depuis un exemple de bibliothèque de composants) reprend le texte alternatif de l'original - ou son absence. - Des composants d'icônes traités comme décoratifs par défaut. Les bibliothèques d'icônes SVG et les polices d'icônes n'incluent souvent aucun nom accessible tant qu'on ne l'ajoute pas explicitement, et il est facile de supposer que le composant environnant s'en charge alors que ce n'est pas le cas.
- Des images significatives marquées à tort comme décoratives, ou l'inverse. Se tromper dans cette distinction est presque aussi fréquent que de l'oublier complètement.
Comment identifier chaque occurrence manquante
C'est l'un des rares contrôles que Scanverra note directement plutôt que de simplement afficher. Lors d'un scan Browser Test, Scanverra exécute Array.from(document.querySelectorAll("img")).filter((img) => !img.alt) sur votre page rendue et signale chaque correspondance comme un problème distinct « Attribut alt manquant », en listant jusqu'aux 10 premières occurrences par scan avec la source de l'image pour la retrouver rapidement. Un véritable audit Lighthouse image-alt distinct contribue également à votre score d'accessibilité - un texte alternatif manquant apparaît donc à deux endroits, pas comme une simple supposition vague.
Comment le corriger
1. Rédigez une véritable description pour les images significatives
Décrivez ce que l'image transmet dans son contexte, pas ce qu'elle est littéralement - évitez « image de » ou « photo de », puisque les lecteurs d'écran l'annoncent déjà comme une image :
1<img
2 src="/keyboard-side-profile.webp"
3 alt="Mechanical keyboard with low-profile keys and RGB backlighting"
4 width={480}
5 height={320}
6/>2. Marquez les images purement décoratives comme vides, pas comme manquantes
1<img src="/divider-flourish.svg" alt="" role="presentation" />3. Donnez aux icônes fonctionnelles un nom accessible pour l'action qu'elles réalisent
1<button aria-label="Search">
2 <SearchIcon aria-hidden="true" />
3</button>4. Ne bourrez pas le texte alternatif de mots-clés
Un texte alternatif qui ressemble à une suite de mots-clés SEO plutôt qu'à une véritable description échoue à la fois sur l'objectif d'accessibilité (il n'est d'aucune utilité pour un utilisateur de lecteur d'écran) et, en pratique, ne fait rien non plus pour le classement - rédigez-le pour la personne qui ne peut pas voir l'image.
Comment Scanverra détecte les problèmes de texte alternatif
Le Browser Test de Scanverra inspecte réellement chaque élément <img> rendu sur la page et note les textes alternatifs manquants comme de véritables problèmes d'accessibilité, plafonnés aux 10 premières occurrences par scan - ce n'est pas un simple champ d'affichage, c'est comptabilisé dans votre score.