Comment écrire un bon alt text : guide complet 2026

L'attribut alt est probablement la règle d'accessibilité la plus connue et pourtant la plus mal appliquée. Sur un audit RGAA moyen, c'est le critère 1.1 qui concentre le plus d'erreurs : alt absents, alt génériques ("image"), descriptions hors contexte ou bourrées de mots-clés SEO. Ce guide reprend le sujet à zéro, théorie puis pratique, pour vous donner une méthode reproductible et 12 exemples directement applicables.

Pourquoi le bon alt text est si difficile

L'apparence du problème est simple : il suffit d'ajouter un attribut alt à chaque <img>. La réalité est plus subtile. Un même visuel peut nécessiter trois alternatives textuelles différentes selon le contexte. Une icône peut être informative ou décorative selon ce qui l'entoure. Une photo de produit utile sur une fiche peut devenir bruit sur une page de catégorie.

Le bon réflexe n'est donc pas de décrire l'image mais de transmettre sa fonction sur la page.

[!TIP] Si vous avez plus d'une centaine d'images à traiter, notre générateur de texte alternatif propose une description de départ que vous adaptez au contexte. C'est un point de départ, jamais une réponse finale.

Ce que dit le RGAA 1.1

Le critère RGAA 1.1 traite des alternatives textuelles. Il distingue plusieurs cas :

• Image porteuse d'information : doit avoir une alternative textuelle pertinente
• Image décorative : doit avoir un alt="" vide pour être ignorée par les technologies d'assistance
• Image légendée : l'alternative et la légende doivent rester cohérentes
• Image-CAPTCHA : doit fournir une alternative non visuelle équivalente
• Image-test : ne peut pas avoir d'alternative textuelle révélant la réponse

La WCAG 2.2 couvre la même exigence via le critère 1.1.1 "Non-text content" (niveau A). Autrement dit : c'est un fondamental, pas un détail.

Le test décisif

Avant d'écrire la moindre alternative, posez-vous deux questions :

1. Si je masque cette image, le contenu de la page perd-il du sens ?
2. Si j'expliquais cette page au téléphone, mentionnerais-je cette image ?

Si la réponse est non aux deux, l'image est décorative : alt="". Si la réponse est oui à au moins une, l'image est informative et nécessite une description ciblée.

Les 5 catégories d'images

Toute image que vous croiserez sur le web tombe dans l'une de ces cinq catégories. La nature du alt change radicalement d'une catégorie à l'autre.

1. Image informative

Apporte une information non présente dans le texte adjacent. Photo d'événement, graphique, schéma, capture d'écran.

<img
  src="conference-vivatech.jpg"
  alt="Marie Martin présentant le rapport accessibilité 2026 à VivaTech."
>

2. Image fonctionnelle

Sert d'action ou de navigation : icône-bouton, logo cliquable, image-lien.

<a href="/">
  <img src="logo.svg" alt="RGAA Checker, retour à l'accueil">
</a>

<button type="submit">
  <img src="loupe.svg" alt="Rechercher">
</button>

L'alt ne décrit pas l'apparence ("loupe stylisée") mais l'action ("Rechercher").

3. Image décorative

N'apporte aucune information : motif de fond, séparateur graphique, icône redondante avec un texte adjacent.

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

<button>
  <img src="poubelle.svg" alt="">
  Supprimer le compte
</button>

Dans le bouton, l'icône poubelle est décorative parce que le texte "Supprimer le compte" porte déjà toute l'information.

4. Image de texte

Contient du texte dans l'image (bannière, citation stylisée, infographie).

<img
  src="promo-soldes.jpg"
  alt="Soldes d'été : 30% sur tous les audits RGAA jusqu'au 30 juin."
>

Note : le RGAA 1.8 recommande d'éviter ces images de texte au profit de vrai HTML stylisé en CSS. Si l'image est inévitable, l'alt doit reproduire le texte mot pour mot.

5. Image complexe (graphique, infographie, schéma)

Trop d'information pour tenir dans 125 caractères.

<figure>
  <img
    src="entonnoir-conversion.png"
    alt="Entonnoir de conversion sur 12 mois, description complète ci-dessous."
    aria-describedby="entonnoir-desc"
  >
  <figcaption id="entonnoir-desc">
    Visites : 10 000. Inscriptions : 1 800 (18%). Scans réalisés : 1 200 (66% des inscrits).
    Conversions payantes : 96 (8% des scans). Le principal point de fuite est entre l'inscription
    et le premier scan.
  </figcaption>
</figure>

12 exemples concrets

Voici 12 cas que vous rencontrerez en production, avec la bonne réponse pour chacun.

Exemple 1 : photo d'équipe sur une page "À propos"

<img
  src="equipe-2026.jpg"
  alt="L'équipe RGAA Checker au complet, 12 personnes, lors du séminaire de Lyon."
>

Exemple 2 : photo d'illustration sur un article de blog

<img src="bureau-design.jpg" alt="">

La photo est décorative parce que l'article décrit déjà le sujet. L'alt vide évite de polluer la lecture.

Exemple 3 : graphique de données

<img
  src="part-marche.png"
  alt="Parts de marché 2026 : Chrome 64%, Safari 19%, Firefox 8%, Edge 5%, autres 4%."
>

L'alt transmet la donnée, pas la forme du graphique.

Exemple 4 : logo cliquable en en-tête

<a href="/">
  <img src="logo.svg" alt="RGAA Checker, accueil">
</a>

L'alt décrit la destination du lien, pas le visuel du logo.

Exemple 5 : icône avec texte adjacent

<span>
  <img src="check-vert.svg" alt="">
  Conformité 92%
</span>

L'icône est décorative parce que le texte porte déjà l'information.

Exemple 6 : icône seule (bouton sans texte)

<button aria-label="Fermer la fenêtre">
  <img src="croix.svg" alt="">
</button>

Ici on utilise aria-label sur le bouton et un alt="" sur l'image. Autre option valide : <img src="croix.svg" alt="Fermer"> sans aria-label.

Exemple 7 : photo de produit

<img
  src="chaise-ergonomique-bleue.jpg"
  alt="Chaise ergonomique Herman Miller Aeron, taille M, coloris bleu pétrole."
>

On reproduit les attributs visuels essentiels à la décision d'achat.

Exemple 8 : avatar généré dynamiquement

<img
  src={user.avatarUrl}
  alt={`Photo de profil de ${user.fullName}`}
>

Pour les avatars personnels, une mention courte suffit. Si l'utilisateur a fourni un alt personnalisé, l'utiliser à la place.

Exemple 9 : carrousel d'images

<img
  src="slide-1.jpg"
  alt="Slide 1 sur 3 : 50% des sites publics ne respectent pas le RGAA en 2026."
>

Pour un carrousel, mentionnez la position pour donner du contexte.

Exemple 10 : émoji ou icône SVG inline

<span aria-hidden="true">⚠️</span>
<span>Attention : votre déclaration d'accessibilité est obsolète.</span>

Pour un émoji décoratif, aria-hidden="true" masque l'émoji aux lecteurs d'écran. Si l'émoji porte l'unique information, donnez-lui un rôle accessible :

<span role="img" aria-label="Avertissement">⚠️</span>

Exemple 11 : CAPTCHA visuel

<img
  src="captcha.png"
  alt="Image de vérification. Une alternative audio est disponible ci-dessous."
>
<button type="button">Écouter la version audio</button>

Le RGAA 1.2 demande une alternative perceptible par un autre canal sensoriel.

Exemple 12 : image décorative en background CSS

<div class="hero" style="background-image: url('vague.svg')">
  <h1>Audit RGAA en 30 secondes</h1>
</div>

Quand l'image n'apporte rien, le background-image CSS est la meilleure solution : il n'existe pas pour les lecteurs d'écran, aucun alt à gérer.

CTA : générer vos alt text plus vite

Si vous avez des centaines d'images à traiter (catalogue produit, médiathèque, archive blog), la rédaction manuelle prend des heures. Notre générateur de texte alternatif analyse l'image avec une IA multimodale et propose une description de départ. Vous restez maître de la version finale : l'IA ne connaît pas le contexte de votre page, vous oui.

Workflow recommandé :

1. Upload de l'image dans l'outil
2. Génération de la description IA
3. Adaptation au contexte de votre page (audience, sujet de l'article, intention de l'image)
4. Validation finale par relecture vocale

[!NOTE] Cette fonctionnalité ne remplace pas un alt bien rédigé. Le critère RGAA 1.1 exige une alternative textuelle pertinente fournie par l'auteur, pas une description IA générique.

Les 7 erreurs les plus fréquentes

Voici ce qu'un audit RGAA détecte presque systématiquement.

Erreur 1 : alt absent

<!-- INCORRECT -->
<img src="photo.jpg">

Le lecteur d'écran lit alors le nom de fichier. Résultat : "image 4287 underscore final v2 point JPG". Inutile et déconcertant.

Erreur 2 : alt rempli avec le nom de fichier

<!-- INCORRECT -->
<img src="photo.jpg" alt="photo.jpg">

Pire que rien : l'utilisateur entend le nom du fichier en croyant que c'est une vraie description.

Erreur 3 : alt générique

<!-- INCORRECT -->
<img src="graph.png" alt="graphique">
<img src="photo.jpg" alt="image">

L'alt confirme ce que l'utilisateur sait déjà (qu'il y a une image) sans rien lui apprendre.

Erreur 4 : redondance avec le texte adjacent

<!-- INCORRECT -->
<figure>
  <img src="pdg.jpg" alt="Marie Martin, PDG depuis 2018.">
  <figcaption>Marie Martin, PDG depuis 2018.</figcaption>
</figure>

L'information est annoncée deux fois. Solution : alt="" sur l'image et seule la figcaption parle.

Erreur 5 : redondance "image de"

<!-- INCORRECT -->
alt="Photo d'un chat noir endormi"

<!-- CORRECT -->
alt="Chat noir endormi sur un canapé en velours bleu."

Le lecteur d'écran annonce déjà "image" devant chaque <img>. Le préciser dans l'alt est redondant.

Erreur 6 : bourrage de mots-clés SEO

<!-- INCORRECT -->
alt="chaussures running homme femme pas cher promo nike adidas paris france"

<!-- CORRECT -->
alt="Nike Air Max 2025 bleu marine, taille 42."

Google n'aime pas le keyword stuffing et l'utilisateur de lecteur d'écran encore moins.

Erreur 7 : alt trop long

<!-- TROP LONG -->
alt="Photo de notre équipe de 12 personnes réunie dans la salle de conférence du 4e étage,
avec des ordinateurs portables ouverts, des plantes vertes en arrière-plan, et de la lumière
naturelle entrant par les grandes baies vitrées orientées sud-est"

Au-delà de 125 caractères, les lecteurs d'écran peuvent couper. Si vous avez besoin d'autant de détails, c'est une image complexe : utilisez aria-describedby ou un texte adjacent.

La méthode en 4 étapes

À appliquer pour chaque image que vous ajoutez à un site.

Étape 1 : catégorisez

Informative, fonctionnelle, décorative, textuelle ou complexe ? Cette première décision oriente tout.

Étape 2 : identifiez le rôle dans la page

Pourquoi cette image est-elle là ? Que doit comprendre une personne qui ne la voit pas pour suivre la page ?

Étape 3 : rédigez en contexte

80 à 125 caractères. Pas de "image de". Information avant description. Action avant apparence pour les images fonctionnelles.

Étape 4 : relisez vocalement

Activez NVDA ou VoiceOver et écoutez ce que ça donne dans le flux de lecture. Si l'alt sonne mal ou interrompt, retravaillez-le. Notre simulateur de lecteur d'écran permet de tester sans installer NVDA.

Checklist finale

Avant chaque mise en production, vérifiez :

• Toutes les images ont un attribut alt (vide ou rempli, jamais absent)
• Les images décoratives ont alt="" (jamais alt="decoration" ou alt=" ")
• Les images informatives décrivent l'information, pas l'apparence
• Les images fonctionnelles décrivent l'action ou la destination
• Aucun alt ne commence par "image de", "photo de", "illustration de"
• Aucun alt ne dépasse 125 caractères (sinon aria-describedby)
• Aucune redondance entre l'alt et la légende ou le texte adjacent
• Les CAPTCHA proposent une alternative non visuelle (RGAA 1.2)
• Les SVG inline ont un <title> ou aria-label selon leur rôle
• Les émojis décoratifs sont aria-hidden="true"

Pour aller plus loin sur les cas tordus, consultez notre article sur les images décoratives et les techniques de rédaction d'alt text. Pour scanner automatiquement votre site et lister toutes les images en infraction, l'audit RGAA repère le critère 1.1 sur l'ensemble de vos pages en moins d'une minute.

Conclusion

Un bon alt text est un exercice d'empathie. Vous écrivez pour quelqu'un qui ne verra jamais cette image et qui veut juste suivre votre contenu. La méthode tient en quatre mots : contexte, fonction, brièveté, relecture. Faites-en un réflexe d'équipe (rédacteurs, designers, développeurs) et vous éliminez le critère le plus pénalisant du RGAA en quelques semaines.