Images accessibles : texte alternatif, décoratives et WCAG

Que sont les images accessibles ?

Les images accessibles donnent aux personnes qui ne peuvent pas les voir la même information ou la même fonction qu'aux autres, grâce à une alternative textuelle. En HTML, il s'agit surtout de l'attribut alt de l'élément img. Le critère de succès 1.1.1 des WCAG (niveau A) exige que tout contenu non textuel ait une alternative textuelle remplissant la même fonction, et n'exempte la décoration pure que si elle est implémentée de façon à pouvoir être ignorée par les technologies d'assistance.

Partir de l'objectif, pas de l'image

La bonne alternative textuelle dépend de la raison pour laquelle l'image figure sur la page. Le W3C WAI Images Tutorial (en anglais) l'exprime ainsi : elle est déterminée par l'auteur, selon l'usage, le contexte et le contenu. Une photo d'oiseau demande une brève mention sur un site de parcs et une description détaillée sur un site d'ornithologie. Demandez-vous à quoi sert l'image, puis choisissez le type :

À quoi cela ressemble en HTML

<!-- Informative : dire ce que cela signifie -->
<img src="dog.jpg" alt="Chien avec une clochette au collier">

<!-- Décorative : alt vide, rien n'est annoncé -->
<img src="divider.png" alt="">

<!-- Fonctionnelle : décrire l'action, pas l'image -->
<a href="/print"><img src="printer.svg" alt="Imprimer cette page"></a>

Un lecteur d'écran lit le texte alternatif à la place de l'image. Si l'attribut est absent, le lecteur d'écran peut annoncer le nom du fichier, ce qui n'est au mieux que du bruit. Un alt="" vide lui indique d'ignorer l'image volontairement, ce qui est différent d'omettre l'attribut.

Images complexes

Un graphique ou un schéma demande deux parties : un alt court qui identifie l'image, et une description longue dans le contenu de la page, avec l'information essentielle. Le tutoriel WAI décrit plusieurs façons de les relier : un lien à côté de l'image, un figure avec un figcaption, ou aria-describedby pointant vers un paragraphe. Ce dernier traite la cible comme un seul paragraphe continu : il ne convient donc qu'au texte brut, pas aux titres ni aux tableaux. Un tableau de données à côté du graphique sert souvent le mieux tout le monde.

La place d'ARIA

Privilégiez le HTML natif. L'attribut alt est le mécanisme principal. Selon le tutoriel WAI, role="presentation" est moins bien pris en charge qu'un alt vide pour les images décoratives. Recourez à ARIA quand le HTML seul ne peut pas exprimer la relation, par exemple avec aria-describedby pour une description longue. Mieux vaut livrer les images décoratives en arrière-plan CSS : elles restent hors du balisage.

Erreurs courantes

• Pas d'attribut alt. Le nom du fichier peut être lu à voix haute, et les vérificateurs automatiques le signalent.
• Nom de fichier ou « image de » en guise d'alt. Dites ce que l'image transmet. Pour une image fonctionnelle, « Imprimer cette page » vaut mieux que « (image d'une) imprimante ».
• Répéter le texte voisin. Si un lien dit déjà « Tarifs », une icône à côté a besoin d'un alt vide.
• Texte dans une image sans alternative textuelle. Si les mots n'apparaissent nulle part ailleurs, l'alt doit les contenir.
• Un graphique dont l'alt n'est qu'un slogan. Mettez les données sur la page.
• Marquer comme décoratives des images porteuses de sens. C'est un jugement sur le contexte : relisez-le au lieu de l'automatiser.

Tester et surveiller les images accessibles

Les tests d'accessibilité automatisés détectent un alt manquant, mais ne peuvent pas juger si le texte est juste, car d'après le tutoriel WAI, cela relève de l'auteur. Associez les analyses automatiques à une relecture manuelle des images porteuses de sens. LoadFocus Page Speed Monitoring exécute des audits Lighthouse planifiés, qui incluent la catégorie Accessibilité (Accessibility), depuis 25 régions cloud. Les images accessibles peuvent aussi être rapides : profitez-en pour vérifier la taille des images. Pour aller plus loin, lisez pourquoi les tests de performance doivent inclure l'accessibilité, les meilleurs outils de test d'accessibilité web et pourquoi améliorer les images de votre site. Les trois articles sont en anglais. L'ensemble des règles figure dans les WCAG.

Questions fréquentes : images accessibles

Qu'est-ce que le texte alternatif ?

Le texte alternatif (alt text) est l'alternative textuelle placée dans l'attribut alt d'un élément img. Les lecteurs d'écran, les afficheurs braille et les navigateurs dont les images sont désactivées l'utilisent à la place de l'image.

Toute image a-t-elle besoin d'un texte alternatif ?

Tout img a besoin de l'attribut alt. Les images informatives et fonctionnelles demandent une valeur porteuse de sens. Les images décoratives demandent une valeur vide, alt="", pour que les technologies d'assistance les ignorent.

Quelle longueur pour un texte alternatif ?

Courte. Le tutoriel WAI décrit le texte alternatif informatif comme une courte expression ou phrase. Si l'image demande davantage, comme un graphique, placez la description longue dans le contenu de la page.

Quand utiliser un alt vide ?

Quand l'image est de la pure décoration, ne sert qu'à la mise en forme ou répète un texte déjà placé à côté. Voyez-y une décision de contexte et non un raccourci.

Faut-il un aria-label sur les images ?

Généralement non. Un alt correct est la voie standard pour img. ARIA aide pour les renvois vers des descriptions longues, comme aria-describedby sur une image complexe.

Comment décrire un graphique ?

Donnez-lui un alt court qui nomme le graphique, et placez les données essentielles sous forme de texte sur la page, par exemple dans un tableau ou dans le paragraphe voisin.