Alternative textuelle

L'alternative textuelle est le texte qu'un lecteur d'écran lit à la place d'une image. En HTML, c'est l'attribut alt sur les images. Son contenu dépend du rôle de l'image dans la page : informative, décorative ou fonctionnelle.

58 % des pages d'accueil analysées par le WebAIM Million présentent au moins une image sans alternative textuelle. C'est le défaut d'accessibilité le plus fréquent sur le web.

#Quel texte mettre dans l'attribut alt ?

Tout dépend du rôle de l'image. Le W3C propose un arbre décisionnel qui se résume en trois cas :

• Image informative : elle transmet un contenu. Le alt décrit ce contenu, pas l'apparence de l'image.
• Image décorative : elle n'apporte rien au sens. Le alt doit être vide : alt="".
• Image-lien : elle sert de lien ou de bouton. Le alt décrit la destination ou l'action, pas l'image.

<!-- Informative : décrit le contenu -->
<img src="graph-ventes.png" alt="Ventes en hausse de 25 % au troisième trimestre 2025">
 
<!-- Décorative : alt vide -->
<img src="bordure.png" alt="">
 
<!-- Image-lien : décrit la destination -->
<a href="/"><img src="logo.svg" alt="Accueil"></a>

Un même visuel peut demander un alt différent selon la page. Une feuille d'érable sur un site touristique canadien ? alt="Canada". Dans un manuel de botanique ? alt="Feuille d'érable à sucre (Acer saccharum)". Le contexte détermine tout.

#Les erreurs que tout le monde fait

alt absent vs alt vide. Sans attribut alt, la plupart des lecteurs d'écran lisent le nom du fichier : IMG_20250114_crop_final_v2.jpg. Avec alt="", ils ignorent l'image. La différence est considérable pour l'utilisateur.

alt="image". Les lecteurs d'écran annoncent déjà « image » avant de lire le alt. Écrire alt="image" produit « image, image ». Même chose avec « photo de… » ou « illustration de… ».

L'image-lien oubliée. Quand une image est le seul contenu d'un lien et qu'elle n'a pas de alt, le lecteur d'écran n'a rien à annoncer. Le lien devient invisible.

#Ce que dit la norme

Le critère 1.1.1 des WCAG (niveau A, le minimum) exige une alternative textuelle pour tout contenu non textuel. Le RGAA y consacre sa thématique 1 entière : neuf critères couvrent les <img>, <svg>, <object>, les zones cliquables et les boutons-images.

#En résumé

Chaque image de votre page a un rôle. Informative : décrivez son contenu. Décorative : alt="". Lien ou bouton : décrivez la destination. Et alt vide n'est pas alt absent.