Alt text

Le lecteur d'écran arrive sur ton image

Imagine une personne aveugle sur ta page. Son lecteur d'écran lit le texte à voix haute, ligne après ligne. Puis il tombe sur une image. Et là, tout se joue sur une seule chose : ce que tu as mis dans l'attribut alt. Trois scénarios, trois mondes différents.

Alt utile : le lecteur d'écran lit ta description, l'information passe, la personne continue sa lecture sans accroc.
Alt absent : faute de mieux, le lecteur d'écran lit le nom du fichier. « IMG-20260604-WA0012.jpg ». Lettre par lettre, chiffre par chiffre. L'horreur absolue.
Alt bavard : tu as écrit « image de » suivi d'un pavé de trois lignes. Le lecteur d'écran récite tout, pollue l'écoute, fait perdre du temps. Trop, c'est aussi nuisible que pas assez.

L'attribut alt, tu l'as déjà croisé dans le cours HTML, à la leçon sur les liens et les images. Tu sais qu'il existe. Ici, on change de niveau : on apprend à le remplir intelligemment. Et c'est moins évident qu'il n'y paraît.

Le chiffre qui pique : selon le rapport WebAIM Million 2025 (analyse automatisée du million de pages d'accueil les plus visitées), 18,5 % des images testées n'avaient aucun attribut alt. Près d'une image sur cinq, sur les plus gros sites du web, laisse le lecteur d'écran réciter un nom de fichier.

La seule question qui compte

Oublie les pixels une seconde. Le bon alt ne se trouve pas en décrivant ce que tu vois, mais en répondant à une question simple :

Si cette image disparaissait, qu'écrirais-je à sa place ?

Cette question change tout. Elle te force à penser à la fonction de l'image dans la page, pas à son contenu visuel. Une même photo de graphique ne se décrit pas pareil selon qu'elle illustre un article ou qu'elle porte une donnée chiffrée. Le contexte décide. Toi, tu remplis le trou que l'image laisserait.

À partir de là, presque tout découle de trois familles d'images. Apprends à les reconnaître, et tu sauras quoi écrire à chaque fois.

Les trois familles d'images

1. Informative : elle porte du sens

L'image transmet une information qu'on ne trouve nulle part ailleurs dans le texte. Ton alt doit transmettre ce sens, pas le décor.

<!-- Mauvais : ça ne dit rien -->
<img src="ventes.png" alt="graphique">

<!-- Bon : l'information passe -->
<img src="ventes.png"
     alt="Évolution des ventes : +40 % entre janvier et juin">

La personne aveugle a maintenant exactement la même information que la personne voyante. C'est ça, le but.

2. Décorative : elle n'ajoute rien

Image d'ambiance, séparateur visuel, icône déjà décrite par le texte juste à côté. Elle ne porte aucune information. La bonne réponse : un alt vide.

<img src="vague-deco.svg" alt="">

Le alt="" n'est pas un oubli, c'est un choix actif : il dit au lecteur d'écran « cette image n'a rien à dire, saute-la ». L'image devient invisible pour lui, et c'est exactement ce qu'on veut.

Le piège qui revient tout le temps : « mettre un alt sur tout » n'est PAS la bonne règle. alt="" (vide, volontaire) et alt absent sont deux choses opposées. Le alt="" dit « saute cette image » : le lecteur d'écran l'ignore proprement. L'alt absent, lui, déclenche le pire : le lecteur d'écran annonce une image, puis lit le nom du fichier. Toujours mettre un attribut alt ; le laisser vide quand l'image est décorative.

3. Fonctionnelle : l'image EST un lien ou un bouton

Logo cliquable qui ramène à l'accueil, icône loupe dans un bouton de recherche, flèche cliquable. Ici, l'image n'illustre pas : elle agit. Le alt doit décrire l'action, pas le dessin.

<!-- Mauvais : décrit le dessin -->
<button><img src="loupe.svg" alt="loupe"></button>

<!-- Bon : décrit l'action -->
<button><img src="loupe.svg" alt="Rechercher"></button>

Le lecteur d'écran annoncera « bouton Rechercher », ce qui est utile. « Bouton loupe » ne dit pas ce qui se passe quand on clique.

Règle d'or : avant d'écrire un alt, classe l'image. Porte-t-elle du sens ? → décris le sens. N'ajoute-t-elle rien ? → alt="". Est-elle cliquable ? → décris l'action. Trois familles, trois réflexes. Tu n'as quasiment jamais besoin d'autre chose.

Les trois anti-patterns à bannir

Commencer par « image de » ou « photo de » : le lecteur d'écran annonce déjà « image » avant de lire ton alt. Écrire « image de chat » lui fait dire « image, image de chat ». Redondant. Commence directement par le contenu : « chat roux endormi ».
Bourrer de mots-clés SEO : entasser des termes pour le référencement transforme ton alt en spam. C'est inutile pour le SEO moderne et insupportable à l'écoute. Le alt sert la personne, pas le robot Google.
Décrire les pixels au lieu du sens : « graphique bleu avec des barres montantes » ne transmet pas l'information. « Ventes en hausse de 40 % » oui. Décris ce que l'image veut dire, pas à quoi elle ressemble.

Prédis avant de lire

Sur un bouton « Suivant », un designer a ajouté une petite flèche ► juste après le mot. Le mot « Suivant » est bien présent, visible, dans le bouton. Quel alt mets-tu sur cette flèche ?

Voir la réponse

alt="" (vide). Le mot « Suivant » est déjà là et déjà lu par le lecteur d'écran. La flèche ne fait que décorer : elle n'ajoute aucune information. Lui donner un alt « flèche » ou « suivant » créerait une redondance pénible (« Suivant, flèche » ou « Suivant, suivant »). La flèche est décorative : alt="", le lecteur d'écran la saute, parfait.

L'arbre de décision de l'alt

Garde cet arbre en tête. Devant n'importe quelle image, descends-le de haut en bas : tu tombes toujours sur le bon alt.

Trois familles, un seul chemin : sens ? cliquable ? Tu tombes toujours sur le bon alt.

The screen reader reaches your image

Picture a blind person on your page. Their screen reader reads the text aloud, line after line. Then it hits an image. And everything hinges on one thing: what you put in the alt attribute. Three scenarios, three different worlds.

Useful alt: the screen reader reads your description, the information lands, the person reads on without a hitch.
Missing alt: for lack of anything better, the screen reader reads the file name. "IMG-20260604-WA0012.jpg". Letter by letter, digit by digit. Absolute horror.
Wordy alt: you wrote "image of" followed by a three-line wall of text. The screen reader recites it all, clutters the listening, wastes time. Too much is as harmful as too little.

You've already met the alt attribute in the HTML course, in the lesson on links and images. You know it exists. Here we step up a level: we learn to fill it intelligently. And it's less obvious than it looks.

The number that stings: according to the WebAIM Million 2025 report (automated analysis of the million most-visited home pages), 18.5% of tested images had no alt attribute at all. Nearly one image in five, on the biggest sites on the web, leaves the screen reader reciting a file name.

The only question that matters

Forget the pixels for a second. The right alt isn't found by describing what you see, but by answering one simple question:

If this image disappeared, what would I write in its place?

This question changes everything. It forces you to think about the image's function on the page, not its visual content. The same chart photo isn't described the same way depending on whether it illustrates an article or carries a figure. Context decides. You fill the hole the image would leave.

From there, almost everything flows from three families of images. Learn to recognise them, and you'll know what to write every time.

The three families of images

1. Informative: it carries meaning

The image conveys information found nowhere else in the text. Your alt must convey that meaning, not the decor.

<!-- Bad: says nothing -->
<img src="sales.png" alt="chart">

<!-- Good: the information lands -->
<img src="sales.png"
     alt="Sales trend: +40% between January and June">

The blind person now has exactly the same information as the sighted one. That's the goal.

2. Decorative: it adds nothing

A mood image, a visual separator, an icon already described by the text right next to it. It carries no information. The right answer: an empty alt.

<img src="wave-deco.svg" alt="">

The alt="" isn't an oversight, it's an active choice: it tells the screen reader "this image has nothing to say, skip it". The image becomes invisible to it, which is exactly what we want.

The trap that comes up all the time: "put an alt on everything" is NOT the right rule. alt="" (empty, deliberate) and a missing alt are two opposite things. The alt="" says "skip this image": the screen reader ignores it cleanly. A missing alt triggers the worst: the screen reader announces an image, then reads the file name. Always include an alt attribute; leave it empty when the image is decorative.

3. Functional: the image IS a link or a button

A clickable logo returning home, a magnifier icon inside a search button, a clickable arrow. Here the image doesn't illustrate: it acts. The alt must describe the action, not the drawing.

<!-- Bad: describes the drawing -->
<button><img src="magnifier.svg" alt="magnifier"></button>

<!-- Good: describes the action -->
<button><img src="magnifier.svg" alt="Search"></button>

The screen reader will announce "Search button", which is useful. "Magnifier button" doesn't say what happens when you click.

Golden rule: before writing an alt, classify the image. Does it carry meaning? → describe the meaning. Does it add nothing? → alt="". Is it clickable? → describe the action. Three families, three reflexes. You almost never need anything else.

The three anti-patterns to ban

Starting with "image of" or "photo of": the screen reader already announces "image" before reading your alt. Writing "image of cat" makes it say "image, image of cat". Redundant. Start straight with the content: "ginger cat asleep".
Stuffing SEO keywords: piling terms in for ranking turns your alt into spam. It's useless for modern SEO and unbearable to listen to. The alt serves the person, not the Google bot.
Describing pixels instead of meaning: "blue chart with rising bars" doesn't convey the information. "Sales up 40%" does. Describe what the image means, not what it looks like.

Predict before reading on

On a "Next" button, a designer added a small arrow ► right after the word. The word "Next" is present, visible, inside the button. What alt do you put on that arrow?

Show the answer

alt="" (empty). The word "Next" is already there and already read by the screen reader. The arrow only decorates: it adds no information. Giving it an "arrow" or "next" alt would create a painful redundancy ("Next, arrow" or "Next, next"). The arrow is decorative: alt="", the screen reader skips it, perfect.

The alt decision tree

Keep this tree in mind. For any image, run down it top to bottom: you always land on the right alt.

Three families, one path: meaning? clickable? You always land on the right alt.

Next step

Images now speak. Time for forms: lesson 5, the label that changes everything, and the errors everyone sees... except those who can't.

Lesson 5: Accessible forms →