Non-conformités fréquentes

Alternatives textuelles manquantes : la non-conformité la plus citée

Une balise <img> sans attribut alt (ou un <input type="image"> sans alternative textuelle) n'a aucun moyen d'indiquer à un lecteur d'écran ce que montre l'image. Les personnes voyantes voient l'image ; celles qui utilisent une technologie d'assistance obtiennent soit le silence, soit, pire, le nom brut du fichier lu à voix haute (« IMG-2847-final-v3.jpg »).

C'est le problème le plus fréquemment invoqué dans les contentieux d'accessibilité web fondés sur l'ADA : les données du secteur le situent autour de 89 % des plaintes, loin devant tout autre type de non-conformité. C'est aussi l'un des plus simples à corriger, ce qui explique en partie sa fréquence : c'est un point de contrôle, pas une appréciation.

Pourquoi c'est important

Un contenu non textuel porteur d'information - photos de produits, graphiques, icônes servant de boutons, documents numérisés - doit avoir un équivalent textuel, faute de quoi cette information n'existe tout simplement pas pour une partie de vos visiteurs. C'est le critère de succès 1.1.1 des WCAG (Contenu non textuel), une exigence de niveau A, donc située dans le socle que tous les niveaux de conformité imposent.

Comment le corriger

Les images porteuses de sens ont besoin d'une description précise et concise de ce que l'image communique - et non de ce qu'elle montre littéralement.

<!-- Avant -->
<img src="ca-t3.png">

<!-- Après -->
<img src="ca-t3.png" alt="Le chiffre d'affaires du 3e trimestre progresse de 18 % sur un an, à 4,2 M€">

Les images purement décoratives (ornement de fond, image d'espacement, icône redondante avec un texte visible voisin) doivent porter un alt="" vide : cela indique explicitement aux technologies d'assistance d'ignorer l'image, ce qui est le résultat attendu. Un alt vide n'est pas une erreur ; un attribut alt absent en est une.

<!-- Icône décorative à côté d'un texte visible qui dit déjà « Télécharger » -->
<img src="icone-telechargement.svg" alt="">
Télécharger

Les boutons image (<input type="image">, ou une <img> dans un élément cliquable sans autre texte) ont besoin d'une alternative décrivant l'action, et non l'image : alt="Lancer la recherche", et non alt="Icône loupe".

Ce qu'une bonne alternative textuelle n'est pas

Évitez les alternatives qui se contentent de reprendre le nom du fichier, qui commencent par « image de… » ou « photo de… » (les lecteurs d'écran annoncent déjà qu'il s'agit d'une image), ou qui accumulent des mots-clés à des fins de référencement : rien de tout cela n'aide la personne qui cherche réellement à comprendre le contenu.

Les analyseurs automatisés comme AllyProof détectent de façon fiable un attribut alt manquant, mais ils ne peuvent pas juger si l'alternative que vous avez rédigée est une bonne description : c'est une vérification seulement partiellement automatisable. Considérez une analyse sans erreur comme « chaque image a une alternative textuelle », et non comme « chaque image a une bonne alternative textuelle ».

Références officielles

Questions fréquentes

Qu'est-ce qu'une alternative textuelle ?
Une alternative textuelle est une courte description associée à une image (l'attribut HTML `alt`) qu'un lecteur d'écran énonce à la place de l'image, afin que les personnes qui ne la voient pas disposent tout de même de l'information qu'elle transmet.
Quelle règle WCAG impose une alternative textuelle ?
Le critère de succès 1.1.1 des WCAG 2.2 (Contenu non textuel), niveau A. Comme il s'agit du niveau de conformité le plus fondamental, un échec sur ce point fragilise presque toute affirmation d'accessibilité.
Quelle alternative textuelle donner à une image décorative ?
Un attribut `alt` vide. Cela indique aux technologies d'assistance que l'image ne porte aucune information et peut être ignorée, au lieu de faire lire un nom de fichier. N'omettez jamais l'attribut complètement.
Les outils automatisés détectent-ils tous les problèmes d'alternative textuelle ?
L'analyse automatisée signale de façon fiable les images dépourvues d'attribut `alt`, mais elle ne peut pas juger si une alternative existante est exacte ou pertinente : cela relève d'une revue humaine. AllyProof signale les cas manquants et indique ceux qu'une personne doit vérifier.

Articles liés

Vous souhaitez connaître le score de votre propre site ?

Lancer un test d'accessibilité gratuit