S’assurer que les éléments <img> disposent d’un texte alternatif ou d’un rôle nul ou de présentation
Le WCAG exige que toutes les images soient accompagnées d’un texte alternatif afin de transmettre leur objectif et leur signification aux utilisateurs qui utilisent des lecteurs d’écran.
Pourquoi c’est important
Sans texte alternatif, les lecteurs d’écran n’ont aucun moyen d’expliquer une image à un utilisateur. Les utilisateurs qui ne voient pas ne comprendront pas les images en relation avec votre contenu sans le texte alternatif nécessaire, ce qui crée une expérience frustrante.
Résolution du problème
Les développeurs doivent s’assurer que tous les éléments <img> comportent un texte alternatif court et descriptif et que tous les éléments <img> décoratifs ont des attributs alt vides (par exemple alt=””).
Il existe trois façons principales d’ajouter un texte de remplacement à une image :
En utilisant un attribut alt, par exemple <img alt=”drawing of a cat” src=”…”>
En utilisant un aria-label, par exemple <img aria-label=« drawing of a cat » src=”…”>
En utilisant un attribut aria-labelledby, par exemple <img arialabelledby=”someID” src=”…”>
Le texte alternatif doit relayer l’objectif de l’image auprès de l’utilisateur, il doit donc être clair et utile. Pour les images décoratives qui ne nécessitent pas de texte alternatif, il convient de fournir des attributs alt « null » (en utilisant alt=””). Cela indique aux lecteurs d’écran d’ignorer l’image.
Bon exemple de code :
<img src=”line.jpg” alt=””>
Cas de tests
Pour plus d’exemples, visitez la bibliothèque de règles ATC du W3C sur GitHub.
