Texte alternatif : le guide pratique, image par image
Le texte alternatif, c'est l'attribut alt d'une image : le texte qu'un lecteur d'écran lit à sa place, et qui s'affiche quand l'image ne se charge pas.
Ce guide vous montre quoi y écrire, et quand le laisser vide, sur seize exemples de pages, de la boulangerie à la boutique de surf.
Trancher image par image
#Comment savoir si une image a besoin d'un texte alternatif ?
Mettez-vous à la place de quelqu'un qui écoute la page avec un lecteur d'écran. Il entend l'alt de l'image, glissé au milieu du texte qui l'entoure.
Toute la méthode tient dans une question : si l'image disparaissait, qu'est-ce que cette personne raterait ? Les quatre étapes ci-dessous se suivent dans l'ordre.
- L'image est-elle seule dans un lien ou un bouton, sans texte visible à côté ?
- Oui : écrivez la destination ou l'action (voir les exemples). C'est un alt rempli.
- Non : passez à la question 2.
- L'image affiche-t-elle un texte qu'on ne lit nulle part ailleurs sur la page ?
- Oui : recopiez ce texte mot pour mot (voir les exemples). C'est un alt rempli.
- Non : passez à la question 3.
- L'image montre-t-elle quelque chose que le texte autour ne dit pas ? Une note, par exemple, ou l'aspect d'un produit.
- Oui : dites-le en une phrase courte (voir les exemples). C'est un alt rempli.
- Non : passez au point 4.
- Il ne reste que du décor, ou une redite du texte voisin.
- Laissez les guillemets vides (voir les exemples, puis les cas où la même image change de rôle). C'est un alt vide.
Vous hésitez encore ? Lisez la page à voix haute à un collègue, sans lui montrer l'écran.
Ce que vous diriez spontanément à la place de l'image, c'est l'alt. Si vous passeriez directement au paragraphe suivant, laissez-le vide.
#Deux cas à part
Deux types d'images demandent un peu plus que ces quatre questions.
- Une image complexe (graphique, schéma, plan) : l'alt seul ne suffit pas. Écrivez un alt court qui dit ce que montre l'image et où trouver le détail, puis donnez la description complète dans la page, juste à côté : un tableau, une liste, un paragraphe (voir l'exemple du graphique).
- Un CAPTCHA : l'alt dit à quoi sert l'image, jamais le code à recopier. Et la page propose une autre façon de passer, par exemple une version audio (voir l'exemple).
#Comment écrire un bon texte alternatif : six réflexes
Vous savez qu'il faut un alt. Reste à l'écrire sans qu'il s'allonge, et voici les situations que vous croiserez le plus souvent.
1. Vous décrivez une photo de chantier pour un article.
Gardez la phrase que vous diriez au téléphone, pas plus : alt="Deux charpentiers posent la toiture du nouveau gymnase".
2. Vous avez envie de commencer par « Image de ».
Supprimez ces mots, puisque le lecteur d'écran annonce déjà une image : alt="Le port de Sète au coucher du soleil".
3. L'image affiche une phrase, comme une bannière de soldes.
Recopiez la phrase telle quelle, sans parler de la police ni des couleurs : alt="Soldes : 30 % sur tous les manteaux".
4. Un élément interactif n'affiche qu'une icône, sans texte à côté.
Un bouton ou un lien avec juste une flèche, par exemple : l'alt devient son nom, alors dites ce que fait le clic, alt="Page suivante", et surtout pas « Flèche droite ».
5. Vous publiez la photo d'une personne que vous ne connaissez pas.
Ne devinez ni son genre, ni son origine, ni son âge : nommez-la si vous savez qui c'est, sinon décrivez ce qu'elle fait, alt="Prise de parole devant un écran de graphiques".
6. Votre site existe en plusieurs langues.
Écrivez l'alt dans la langue de la page : sur la version anglaise, le lecteur d'écran prend une voix anglaise et écorche un alt resté en français. Sur la page anglaise, ce sera alt="The bakery seen from the street at dusk".
#Image décorative : quand l'alt doit rester vide
Une image décorative, c'est celle dont l'absence ne changerait rien pour la personne qui écoute. Elle reçoit alt="" : deux guillemets collés, sans espace entre eux.
Ne confondez pas alt vide et alt absent. Sans l'attribut, beaucoup de lecteurs d'écran lisent le nom du fichier, et votre visiteur entend « IMG 4021 point jpg ».
Sur la page « Notre histoire » d'une maison de thé, une frise végétale sépare deux paragraphes dont aucun ne parle d'elle.
alt=""Pourquoi. Retirez la frise et le texte raconte la même histoire : elle rythme la page et ne sert à rien d'autre.
Chez un loueur de cabanes, la photo d'un fjord sert de fond à un titre, à une phrase et à un bouton « Réserver ».
alt=""Pourquoi. Le titre et la phrase disent déjà ce que montre la photo, qui se contente d'installer l'ambiance.
Le réflexe qui consiste à mettre un alt descriptif partout « pour être tranquille » remplit les oreilles de bruit. Nous l'avons détaillé dans un article à part.
Vos images n'ont pas besoin de texte alternatif
#Texte alternatif d'une image informative : exemples
Une image informative porte quelque chose que le texte ne dit pas. Son alt transmet cette information, et laisse de côté tout ce qui sert seulement à faire joli.
Demandez-vous : « Si je ne pouvais pas montrer cette image, quels mots utiliserais-je ? » En général, il en faut beaucoup moins qu'on ne le croit.
Sur la page d'accueil d'un diner, une bannière illustrée est la seule à annoncer l'offre du mardi.
alt="Milk-shake offert le mardi"Pourquoi. L'offre est l'information, alors le verre de milk-shake et la typographie rétro restent en dehors de l'alt.
Dans le bloc d'avis d'une trattoria, cinq étoiles affichent la note, qui n'est écrite nulle part en chiffres.
alt="Note : 4 sur 5"Pourquoi. Les cinq fichiers forment une seule information : la première étoile la porte, les quatre autres se taisent.
Sans cette astuce, la personne entend « étoile, étoile, étoile, étoile, étoile vide » et doit compter elle-même.
Le rapport annuel d'une coopérative montre sa production de sirop d'érable en barres, suivie d'un tableau, sans aucun chiffre dans le texte.
alt="Production de sirop de 2021 à 2025 : de 48 à 80 tonnes, avec un creux en 2023. Détail dans le tableau ci-dessous."Pourquoi. L'alt résume la tendance en une phrase et renvoie au tableau, qui porte le détail.
Retenez ce duo pour tout graphique, carte ou schéma : un alt court qui dit quoi retenir, et une description complète visible à côté.
#Texte alternatif d'une image cliquable, dans un lien ou un bouton
Quand une image est le seul contenu d'un lien ou d'un bouton, son alt devient le nom de ce lien. Le lecteur d'écran annonce « Rechercher, bouton » ou « Accueil, lien », et la personne décide de cliquer avec cette seule information.
Côté développement, c'est le cas le plus courant : la maquette montre une icône, sans libellé. Écrivez ce que fait le clic.
Sur le site d'un réseau de tramway, le bouton de recherche ne montre qu'une loupe.
alt="Rechercher"Pourquoi. Avec alt="loupe", on entendrait « loupe, bouton », et personne ne sait ce qu'une loupe fait sur un site de tramway.
Un formulaire de réservation de hammam demande de recopier un code déformé, avec un bouton pour l'écouter.
alt="Code de vérification à recopier"Pourquoi. L'alt dit à quoi sert l'image et jamais le code lui-même, sinon n'importe quel robot pourrait le lire.
Dans l'en-tête d'une boulangerie, le logo est seul dans le lien qui ramène à l'accueil.
alt="Maison Aubépine, accueil"Pourquoi. Seul dans le lien, le logo dit qui l'on est et où mène le clic, et le mot « logo » n'apporterait rien.
Sur un site de recettes, une rangée d'avatars ronds mène aux profils des contributeurs, sans aucun nom affiché.
alt="Ilse van Dorp"Pourquoi. L'avatar sert de nom au lien : il nomme la personne, et son apparence n'a aucune importance ici.
Sur mobile, une boutique de planches de surf réduit son panier à une icône surmontée d'une pastille « 3 ».
alt="Panier, 3 articles"Pourquoi. L'alt annonce la destination et le nombre d'articles, et la pastille est masquée pour ne pas répéter le chiffre.
#Exemples de texte alternatif : la même image selon la page
Voici le piège le plus courant pour un rédacteur : vous saisissez l'alt une fois dans la médiathèque du CMS, et il suit l'image partout. Or le bon alt dépend de l'endroit où l'image s'affiche, et le fichier n'en sait rien.
C'est pour cette raison que l'outil en haut de cette page accepte, en plus de l'image, une capture de la zone qui l'entoure ou le code HTML autour d'elle. Avec ce contexte, il reconnaît mieux le type de l'image (décorative, informative, interactive, complexe ou captcha) et propose un texte que vous modifiez avant de le copier.
Les cinq paires ci-dessous utilisent chaque fois le même fichier, sur deux sites différents.
#Le logo : lien d'accueil ou vignette d'article
Le logo de la Maison Aubépine, vu plus haut dans son lien d'accueil, réapparaît dans un journal local qui annonce sa deuxième boutique.
alt=""Pourquoi. Le titre de l'article nomme déjà la boulangerie : le logo n'y est plus qu'une vignette.
#La photo produit : fiche détaillée ou carte cliquable
Sur la fiche de l'Atelier Kōyō, la photo est la seule à montrer l'aspect de la théière, puisque le texte parle du prix, de la contenance et de l'entretien.
alt="Théière en grès brun, anse en bambou tressé, émail vert qui coule en gouttes sur l'épaule"Pourquoi. L'alt donne ce qu'un acheteur voyant retient et que le texte tait : la matière, l'anse et l'émail.
La même photo sert ensuite de vignette dans une sélection de cadeaux, où chaque carte est un seul lien avec le nom, l'atelier et le prix.
alt=""Pourquoi. Le nom du produit est déjà dans le lien, donc un alt le ferait entendre deux fois de suite.
#Le portrait : carte d'équipe ou avatar seul
Sur la page équipe d'un cabinet d'architectes, le nom et la fonction d'Ilse van Dorp sont écrits juste sous sa photo.
alt=""Pourquoi. Le texte dit déjà qui elle est, et décrire son visage n'ajouterait que des suppositions.
Plus haut, la même photo réduite en avatar était seule dans un lien de profil. Là, elle recevait son nom : alt="Ilse van Dorp".
Une exception à garder en tête : l'émotion. Si la personne paraît furieuse ou ravie et que cela change la lecture de l'article, dites-le dans l'alt.
#Le graphique : seule source ou redite du texte
Le graphique de la coopérative, vu plus haut avec son alt résumé, illustre aussi un article d'épicerie fine dont le paragraphe cite déjà toutes les valeurs.
alt=""Pourquoi. Le paragraphe juste au-dessus donne déjà tous les chiffres que l'image redit.
#L'icône : repère près d'un texte ou nom du lien
Une épicerie en ligne d'huile d'olive affiche l'icône du panier suivie du texte visible « Panier (3) ».
alt=""Pourquoi. Avec un alt, on entendrait « panier, panier, 3 » : l'icône se tait et laisse parler le texte.
Comparez avec la boutique de surf vue plus haut. La même icône, seule dans son lien, y porte alt="Panier, 3 articles".
Le tableau ci-dessous rassemble les cinq paires.
| Image | Contexte | Exemple de texte alternatif |
|---|---|---|
| Logo | Seul dans le lien vers l'accueil | alt="Maison Aubépine, accueil" |
| Vignette d'un article dont le texte nomme déjà la marque | alt="" | |
| Photo produit | Fiche produit, où seule la photo montre l'aspect | alt="Théière en grès brun, anse en bambou tressé, émail vert qui coule en gouttes sur l'épaule" |
| Carte cliquable qui contient déjà le nom du produit | alt="" | |
| Portrait | Avatar seul dans un lien vers un profil | alt="Ilse van Dorp" |
| Carte d'équipe avec le nom et la fonction écrits dessous | alt="" | |
| Graphique | Page où aucun texte ne donne les chiffres | alt="Production de sirop de 2021 à 2025 : de 48 à 80 tonnes, avec un creux en 2023. Détail dans le tableau ci-dessous." |
| Page dont le texte donne déjà toutes les valeurs | alt="" | |
| Icône de panier | Seule dans un lien | alt="Panier, 3 articles" |
| Suivie d'un texte visible qui dit la même chose | alt="" |
Votre CMS ne permet de saisir l'alt que dans la médiathèque ? Demandez à votre équipe technique de l'ouvrir aussi au niveau du bloc.
#Neuf erreurs fréquentes du texte alternatif, et leur correction
Les erreurs se rangent en deux familles. Soit on se trompe sur le rôle de l'image, soit on a le bon rôle mais le texte rate sa cible.
Première famille : se tromper de type d'image. Ces erreurs-là arrivent avant même d'écrire.
#La décorative prise pour une informative
Votre thème de blog insère une frise fleurie entre chaque bloc de l'article.
À éviter : alt="Frise florale verte"
Correct : alt=""
Répétée dix fois par page, « frise florale verte » coupe la lecture sans rien apprendre à personne.
#Le logo-lien pris pour un décor
Dans l'en-tête, vous videz l'alt du logo parce que « ce n'est qu'un logo ».
À éviter : alt=""
Correct : alt="Maison Aubépine, accueil"
Seul dans le lien, le logo sert de nom au lien : vidé, il le rend muet.
#Le graphique traité comme une illustration
Votre rapport affiche un graphique de ventes que le texte ne commente pas.
À éviter : alt="Graphique en barres coloré"
Correct : alt="Ventes 2025 : hausse de mars à août, puis baisse jusqu'en décembre. Détail dans le tableau ci-dessous."
La personne qui écoute veut les données, et la forme des barres ne lui sert à rien.
Deuxième famille : mal rédiger l'alt. Le type est juste, mais le texte n'aide pas.
#« Image de » en ouverture
Vous illustrez un article sur le port de Sète.
À éviter : alt="Image du port de Sète"
Correct : alt="Chalutiers amarrés au quai du port de Sète"
Le lecteur d'écran annonce déjà une image, alors commencez par ce qui compte.
#Le nom de fichier laissé tel quel
Votre CMS a prérempli le champ avec le nom du fichier importé.
À éviter : alt="IMG_4021.jpg"
Correct : alt="Cabane en bois au bord d'un fjord"
Un nom de fichier ne parle à personne : remplacez-le, ou videz le champ si l'image décore.
#L'apparence au lieu de l'action
Une flèche seule sert de lien vers la page suivante d'une liste d'articles.
À éviter : alt="Flèche droite bleue"
Correct : alt="Page suivante"
Dans un lien, la personne veut savoir où elle va, et la couleur de la flèche ne l'aide en rien.
#Le texte de l'image résumé
Une bannière affiche « Livraison offerte dès 40 € jusqu'au 15 juin ».
À éviter : alt="Bannière promotionnelle"
Correct : alt="Livraison offerte dès 40 € jusqu'au 15 juin"
Sans le texte exact, l'offre disparaît pour qui écoute la page.
#Les mots-clés empilés
Sur une fiche produit, vous pensez aider le référencement en ajoutant des mots-clés.
À éviter : alt="théière japonaise théière fonte cadeau thé pas cher"
Correct : alt="Théière en grès brun, anse en bambou tressé"
Une liste de mots-clés épuise la personne qui écoute, et Google la traite comme du remplissage.
#La personne devinée
Pour le compte rendu d'un salon, vous décrivez la photo d'une intervenante.
À éviter : alt="Jeune femme d'origine asiatique souriante"
Correct : alt="Léa Martin, responsable des ventes, présente les résultats au micro"
Personne ne connaît l'âge ou l'origine de quelqu'un en le regardant : nommez la personne et dites ce qu'elle fait.
#Checklist pour vérifier le texte alternatif de vos images
Passez chaque image de la page en revue avec ces huit cases.
Pour vérifier une page déjà en ligne, l'application Includdy la scanne et repère les images sans alt. Vous savez alors lesquelles reprendre avec la checklist ci-dessus.