Bien rédiger les textes alternatifs
Les textes alternatifs rendent les images accessibles aux personnes qui ne peuvent pas les voir. Vous apprendrez ici les règles, verrez des exemples – et découvrirez quand un texte alternatif vide est le bon choix.
À quoi servent les textes alternatifs
Un texte alternatif (ou « alt ») est l'équivalent textuel d'une image. Il se place dans l'attribut HTML alt de l'élément img et devient visible lorsque l'image elle-même n'est pas disponible – et audible lorsque quelqu'un ne peut pas la voir.
- Lecteurs d'écran : les personnes aveugles ou fortement malvoyantes se font lire les pages web à voix haute. Sans texte alternatif, elles n'entendent que le nom du fichier ou le mot « graphique » – l'information portée par l'image est perdue.
- Images désactivées ou non chargées : en cas de connexion lente, d'erreur de chargement ou d'images désactivées, le navigateur affiche le texte alternatif.
- Le SEO comme effet secondaire : les moteurs de recherche utilisent les textes alternatifs pour comprendre le contenu des images. C'est un bonus bienvenu – mais pas le but. Bourrer les textes alternatifs de mots-clés nuit aux personnes auxquelles ils sont réellement destinés.
Les textes alternatifs comptent par ailleurs parmi les exigences les plus anciennes de l'accessibilité : le critère de succès 1.1.1 « Contenu non textuel » relève du niveau de conformité A – le niveau le plus bas des WCAG. Les textes alternatifs manquants figurent pourtant depuis des années parmi les erreurs les plus fréquentes du web.
Les règles de base
La fonction avant la description
Demandez-vous d'abord : quel rôle joue l'image à cet endroit ? Un bon texte alternatif transmet l'information ou la fonction de l'image – pas chaque détail visible. Une photo du comité de direction dans un communiqué de presse a besoin des noms et de l'occasion, pas de la description des couleurs de cravate.
Le contexte décide
La même image peut nécessiter des textes alternatifs totalement différents selon son environnement. Une photo d'un pommier ne signifie pas la même chose sur un blog de jardinage (« Jeune pommier de la variété Elstar avec tuteur ») que sur la page équipe d'un verger (« Notre verger pendant la récolte »). Rédigez toujours le texte alternatif pour la page concrète, jamais « en réserve » pour l'image en soi.
La longueur : courte, mais complète
En règle générale, environ 80 à 125 caractères ont fait leurs preuves – une à deux phrases concises. Ce n'est pas une limite technique, mais une question de confort : les lecteurs d'écran lisent le texte alternatif d'un seul tenant, sans possibilité de pause comme dans le corps du texte. Ce qui doit être plus long relève d'une description détaillée (voir plus bas).
Pas de « image de… »
Les lecteurs d'écran annoncent de toute façon les images comme des graphiques. Des formulations comme « image de », « la photo montre » ou « graphique : » font donc double emploi. Exception : si le mode de représentation est lui-même pertinent (« peinture à l'huile », « radiographie », « capture d'écran »), il peut figurer dans le texte.
Exemples : bons et mauvais
| Situation | Mauvais | Bon |
|---|---|---|
| Photo produit dans une boutique | « IMG_4823.jpg » ou « Chaussure » | « Chaussure de randonnée bleue avec doublure à membrane, vue de côté » |
| Photo d'équipe sur la page « À propos » | « Image de notre équipe » | « L'équipe de douze personnes devant les locaux de l'entreprise à Hambourg » |
| Diagramme dans le rapport annuel | « Diagramme » | « Diagramme en barres : le chiffre d'affaires a progressé de 18 % en 2025 pour atteindre 2,4 millions d'euros » |
| Icône loupe servant de bouton de recherche | « Loupe » | « Rechercher » |
| Motif de vagues décoratif servant de séparateur | « Motif de vagues bleues servant de séparateur décoratif » | Texte alternatif vide : alt="" |
Images décoratives : un alt vide plutôt qu'absent
Toutes les images ne portent pas d'information. Cadres ornementaux, motifs d'arrière-plan, photos d'ambiance sans lien avec le contenu – un lecteur d'écran peut ignorer tout cela sans perte. L'image reçoit alors un attribut alt vide : alt="".
Important : un alt="" vide est tout autre chose qu'un attribut alt manquant. Si l'attribut manque complètement, de nombreux lecteurs d'écran lisent le nom du fichier à la place – « DSC-zéro-zéro-quatre-sept-tiret bas-final-v2-point-jpg ». L'attribut vide dit au contraire explicitement : « Vous pouvez ignorer cette image. »
En cas de doute, un test simple aide : la page perdrait-elle de l'information si l'image disparaissait ? Si non, elle est décorative.
Images-liens : décrire la destination
Si une image est en même temps un lien, la mission du texte alternatif change : il doit décrire où mène le lien ou ce qu'il déclenche – pas ce que l'on voit. Un logo d'entreprise cliquable dans l'en-tête reçoit donc « Vers la page d'accueil » ou le nom de l'entreprise, pas « Logo avec vague bleue ». Une vignette qui mène à un article porte le titre de l'article comme texte alternatif. Et si un lien texte avec la même destination figure déjà à côté de l'image, l'image dans le lien peut recevoir alt="", afin que les utilisateurs de lecteurs d'écran n'entendent pas le lien deux fois.
Graphiques et diagrammes complexes
Infographies, diagrammes, organigrammes ou cartes ne tiennent pas en 125 caractères. Ici s'applique une démarche en deux temps :
- Un texte alternatif court avec le sujet et le message clé : « Graphique en courbes : le nombre de visiteurs a triplé entre 2023 et 2026. »
- Une description détaillée avec toutes les données pertinentes – idéalement sous forme de texte normal directement sous le graphique, de zone dépliable ou de tableau de données. Tout le monde en profite d'ailleurs, pas seulement les utilisateurs de lecteurs d'écran.
Proposer les données d'un diagramme sous forme de tableau HTML est souvent la solution la plus propre : les tableaux se parcourent de manière ciblée avec un lecteur d'écran, ce qui n'est pas le cas d'un long bloc de texte lu d'une traite.
Logos, icônes et texte dans l'image
- Logos : le texte alternatif est le nom de l'entreprise ou du produit – « Wave Tools », pas « Logo ». Le mot « logo » peut être ajouté s'il aide à situer l'élément.
- Icônes avec fonction : décrivez l'action (« Ouvrir le menu », « Panier »), pas le symbole (« trois traits », « caddie »).
- Icônes accompagnées de texte : si le libellé figure déjà à côté, l'icône est décorative –
alt="". - Texte dans l'image : en principe, le texte doit figurer sur la page sous forme de vrai texte, pas dans des graphiques. Si c'est inévitable (par exemple pour une affiche d'événement), le texte complet doit se trouver dans le texte alternatif ou dans une description détaillée – mot pour mot, pas résumé approximativement.
Les textes alternatifs dans WordPress
WordPress propose des champs de texte alternatif à deux endroits :
- Médiathèque : chaque image y possède un champ « Texte alternatif ». Ce que vous y saisissez est repris comme valeur par défaut lorsque vous insérez à nouveau l'image dans un contenu. Les images déjà insérées ne changent pas rétroactivement.
- Éditeur de blocs : dans le bloc Image, vous pouvez ajuster le texte alternatif pour chaque utilisation dans les réglages du bloc, sous « Texte alternatif » – exactement ce qu'il faut, puisque le contexte décide. La valeur du bloc remplace celle de la médiathèque.
Pour les images décoratives, laissez simplement le champ vide dans WordPress – l'éditeur de blocs écrit alors correctement alt="" dans le HTML. La légende (caption) n'est d'ailleurs pas un substitut au texte alternatif : elle est affichée à tout le monde et remplit un autre rôle.
Comment l'IA peut aider – et où sont ses limites
L'IA d'analyse d'images moderne décrit les photos avec une justesse étonnante et constitue une aide réelle lorsque des centaines d'images dorment dans la médiathèque sans texte alternatif. Elle reconnaît les motifs, le nombre de personnes, l'ambiance et souvent même le texte présent dans l'image – et livre en quelques secondes une ébauche exploitable.
Ce que l'IA ne peut pas lire dans l'image, c'est le contexte : elle voit « femme devant un ordinateur portable dans un bureau lumineux », mais pas qu'il s'agit de votre nouvelle directrice générale et que l'image illustre sa présentation. Elle ne détecte pas si une image est décorative sur cette page ou si, en tant que lien, elle devrait décrire sa destination.
Conseil pratique : utilisez l'IA comme premier jet, pas comme résultat final. Relisez chaque texte alternatif généré et complétez ce que vous seul savez : noms, occasions, désignations de produits, fonction de l'image sur la page. Vous combinez ainsi la vitesse de la machine avec le savoir de l'humain.
Pour vérifier si vos textes alternatifs fonctionnent en pratique, rien ne vaut un passage au lecteur d'écran et des outils de vérification automatiques – notre guide Tester l'accessibilité de votre site vous montre comment procéder.
Wave Access génère des textes alternatifs assistés par IA directement dans WordPress – pour les nouveaux téléversements comme pour toute la médiathèque, avec vous comme instance finale.
Découvrir Wave Access →