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.

Retour au glossaire
Partagez cet article

Pour aller plus loin

Attribut alt

L'attribut alt est l'attribut HTML de la balise <img> qui contient le texte alternatif d'une image. Les lecteurs d'écran lisent ce texte à la place de l'image, et les navigateurs l'affichent quand l'image ne se charge pas. Trois états possibles : absent, vide ou rempli — chacun produit un comportement différent.

Image porteuse d'information

Une image porteuse d'information est une image dont le retrait ferait perdre du sens à la page. Elle transmet un contenu que le texte environnant ne fournit pas. Le RGAA et les WCAG exigent qu'elle porte une alternative textuelle décrivant l'information véhiculée, pas l'apparence de l'image.

Nom accessible

Le nom accessible est le texte que les technologies d'assistance utilisent pour identifier un élément d'interface. Le navigateur le calcule selon un algorithme du W3C, en consultant plusieurs sources dans un ordre de priorité strict : aria-labelledby, aria-label, le <label> HTML, le contenu textuel, puis l'attribut title en dernier recours.