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.

Retirez l'attribut alt d'une image et lancez un lecteur d'écran. Vous entendrez quelque chose comme : « image, IMG_20250114_crop_final_v2.jpg ». Le nom du fichier, lu à voix haute. Voilà ce que subissent des millions d'utilisateurs quand le alt manque.

#Absent, vide ou rempli : trois comportements distincts

La confusion entre ces trois états est la source de la plupart des erreurs. Voici ce qui se passe concrètement :

<!-- alt absent : le lecteur d'écran lit le nom du fichier -->
<img src="equipe.jpg">
 
<!-- alt vide : le lecteur d'écran ignore l'image -->
<img src="bordure-decorative.png" alt="">
 
<!-- alt rempli : le lecteur d'écran lit le texte -->
<img src="graph-ca.png" alt="Chiffre d'affaires en hausse de 18 % au T3 2025">

alt="" (vide) signale explicitement « cette image est décorative, ignorez-la ». Sans attribut alt du tout, le navigateur suppose que l'image porte de l'information et le lecteur d'écran se rabat sur le seul indice disponible : le nom du fichier. Le W3C recommande un arbre décisionnel pour choisir entre ces trois cas.

#Ce que les outils d'audit ne vous diront pas

Les scanners automatiques détectent un alt manquant. Ils ne vérifient pas si le texte est pertinent.

« image » dans le alt. Les lecteurs d'écran annoncent déjà le rôle « image » avant de lire l'attribut. Écrire alt="image du produit" produit « image, image du produit ». Même problème avec « photo de… » ou « illustration de… ». Décrivez le contenu, pas le format.

Le même alt partout. Copier alt="logo" sur trente images d'un carrousel de partenaires n'aide personne. Chaque image a un contexte propre.

L'image-lien sans alt. Quand une <img> est le seul contenu d'un lien <a>, le alt tient lieu d'intitulé de lien. Sans lui, le lien est invisible aux technologies d'assistance.

Limitez le alt à environ 150 caractères. Au-delà, le lecteur d'écran débite un paragraphe sans possibilité de pause. Pour les images complexes (graphiques, infographies), préférez une description détaillée dans le corps de la page.

#Ce que dit la norme

Le critère 1.1.1 des WCAG (niveau A) impose une alternative textuelle pour tout contenu non textuel. Le RGAA y consacre ses neuf premiers critères : balises <img>, <svg>, <object>, zones cliquables, boutons-images. En HTML5, l'attribut alt est obligatoire sur chaque <img>.

#En résumé

Pas d'attribut alt : le lecteur d'écran lit le nom du fichier. alt="" : l'image est ignorée. alt rempli : le texte est lu. Choisir le bon état est un geste de dix secondes qui change l'expérience de navigation pour des millions de personnes.