Attribut alt : rédiger l’alternative textuelle des images (RGAA 1.1 à 1.3)

Une personne aveugle ne voit pas vos images : son lecteur d’écran lit leur alternative textuelle, l’attribut alt. Sans alternative, l’information est perdue. Avec une mauvaise alternative, elle est parasitée. Les images sont le premier thème du RGAA, et l’un de ceux où les erreurs sont les plus fréquentes.

Ce que disent les critères 1.1 à 1.3

Critère	Exigence
1.1	Chaque image porteuse d’information a une alternative textuelle
1.2	Chaque image de décoration est ignorée par les technologies d’assistance
1.3	L’alternative de chaque image porteuse d’information est pertinente

Autrement dit : il faut d’abord décider si l’image informe ou décore, puis écrire l’alternative en conséquence.

Une question à se poser : que perd-on sans l’image ?

Cachez l’image et relisez la page. Si une information manque, l’image est porteuse d’information : son alternative doit transmettre cette information. Si rien ne manque, elle est décorative : elle doit être ignorée.

Image porteuse d’information

L’alternative décrit ce que l’image apporte, pas ce qu’elle montre au pixel près.

<!-- Non : décrit la forme, pas l’information -->
<img src="graphique.png" alt="Graphique en barres bleues">

<!-- Oui : donne l’information -->
<img src="graphique.png" alt="Ventes 2026 : +18 % par rapport à 2025">

Quelques règles simples :

• soyez bref : une phrase courte suffit, sans « image de » ni « photo de », le lecteur d’écran annonce déjà qu’il s’agit d’une image ;
• pas de nom de fichier : alt="IMG_2041.jpg" est la pire alternative possible ;
• si l’image contient du texte, l’alternative reprend ce texte ;
• si l’information est complexe (schéma, infographie), donnez un résumé dans alt et une description détaillée à côté : ce sont les critères 1.6 et 1.7.

Image décorative

Une image décorative a un attribut alt vide, pas absent :

<!-- Non : sans alt, certains lecteurs d’écran lisent le nom du fichier -->
<img src="vague-deco.svg">

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

Mieux encore, une décoration pure peut passer en image de fond CSS : elle sort alors du contenu.

Attention au piège inverse : une photo d’illustration à côté d’un titre d’article est souvent décorative. Lui donner une alternative comme « Femme souriante devant un ordinateur » ajoute du bruit sans rien apporter.

Image dans un lien ou un bouton

Quand l’image est le seul contenu d’un lien ou d’un bouton, son alternative en devient l’intitulé. Elle doit donc dire où mène le lien ou ce que fait le bouton :

<!-- Non -->
<a href="/"><img src="logo.svg" alt="Logo"></a>

<!-- Oui -->
<a href="/"><img src="logo.svg" alt="Araspeed, accueil"></a>

Pour une icône seule (loupe, croix, panier), même logique : alt="Rechercher", alt="Fermer", alt="Panier (3 articles)".

Les SVG et les images CSS

Un SVG en ligne n’a pas d’attribut alt. On utilise role="img" et aria-label s’il informe, aria-hidden="true" s’il décore :

<!-- SVG porteur d’information -->
<svg role="img" aria-label="Note : 4 sur 5">…</svg>

<!-- SVG décoratif -->
<svg aria-hidden="true" focusable="false">…</svg>

Une image de fond CSS n’est jamais restituée. Si elle porte une information, cette information doit exister aussi en texte.

Les erreurs les plus fréquentes

• alt absent sur les images de contenu (critère 1.1), souvent dans les carrousels et les galeries ;
• alt identique sur toutes les images d’une liste de produits ;
• alternative qui répète le texte juste à côté (le lecteur d’écran le lit deux fois) ;
• images de texte (bannières, boutons graphiques) dont le texte n’est pas repris (critère 1.8) ;
• légende visible non reliée à son image, avec <figure> et <figcaption> (critère 1.9).

Vérifier vos images

L’absence d’alternative se détecte automatiquement : Araspeed liste les images sans alt (critère 1.1) et les légendes mal reliées (critère 1.9) dans l’analyse gratuite. Juger si une alternative est pertinente (critère 1.3) ou si une image est vraiment décorative (critère 1.2) demande de comprendre la page : c’est le rôle de l’analyse approfondie de l’offre Pro. Le détail est sur la page des 106 critères.