Longueur du texte alternatif : quelle taille choisir ?

TL;DR : Le texte alternatif n’a pas de règle universelle de 125 caractères. Il doit être aussi court que possible et aussi long que nécessaire pour remplacer la fonction de l’image dans son contexte. Une image informative simple demande souvent une phrase concise. Une image fonctionnelle décrit l’action. Une image décorative reçoit généralement un alt vide. Un graphique complexe nécessite une courte étiquette et des détails à proximité.

La longueur du texte alternatif est souvent réduite à un nombre, mais l’accessibilité ne fonctionne pas ainsi. Une description de dix mots peut être trop longue pour une image décorative et beaucoup trop courte pour un graphique. Le bon texte dépend de la raison de la présence de l’image et de ce qu’une personne perdrait sans la voir.

Ce guide explique comment écrire un texte alternatif pour les images informatives, fonctionnelles, décoratives et complexes. Il traite aussi les erreurs courantes : accumulation de mots-clés, répétition de la légende et descriptions qui énumèrent des détails visuels sans communiquer la fonction. Le but est un remplacement utile, pas un score parfait.

Rédigez la description dans son contexte, puis vérifiez sa taille avec le compteur de caractères. Le comptage aide à repérer une description surchargée, mais ne doit jamais vous obliger à supprimer une information nécessaire pour comprendre la page.

Quelle longueur doit avoir un texte alternatif ?

Le texte alternatif doit être aussi court que possible et aussi long que nécessaire pour communiquer la fonction de l’image. Une phrase concise suffit souvent pour une image informative simple. Une icône fonctionnelle peut demander quelques mots. Un graphique complexe nécessite généralement un attribut court et une explication détaillée ailleurs.

Il n’existe aucune limite universelle HTML ou WCAG de 125 caractères. Ce nombre est une recommandation pratique utilisée par certaines équipes et d’anciens outils, pas une règle qui rend automatiquement un texte plus long inaccessible.

Lisez la page sans l’image et demandez-vous quelle information manque. Écrivez uniquement ce remplacement. Si la description devient un paragraphe, déplacez les détails dans le texte visible afin que davantage de personnes puissent les utiliser.

Que doit décrire le texte alternatif ?

Décrivez la fonction de l’image et l’information qu’elle ajoute dans ce contexte précis. N’énumérez pas chaque objet visible si ces détails n’ont aucune importance. La même photo peut demander un texte différent sur une actualité, une fiche produit ou un profil personnel.

Le W3C demande que le contenu non textuel dispose d’une alternative servant un objectif équivalent, avec des exceptions comme la décoration. Son arbre de décision pour les alternatives d’image aide à choisir entre description, étiquette fonctionnelle, explication voisine ou attribut alt vide.

Évitez de commencer par « image de » ou « photo de », sauf si le support lui-même compte. Les lecteurs d’écran et le code environnant identifient généralement déjà le contenu comme une image.

Images informatives, fonctionnelles et décoratives

Classez l’image avant d’écrire. La catégorie détermine si le texte doit décrire le contenu, expliquer une action ou rester vide.

• Image informative : communiquez le fait ou le sens ajouté. Exemple : « Vélo rouge garé près de l’entrée de la gare. »
• Image fonctionnelle : décrivez l’action ou la destination. Un bouton en forme de loupe doit dire « Rechercher », pas « Loupe ».
• Image décorative : utilisez un attribut alt vide en HTML lorsque l’image n’ajoute aucune information et doit être ignorée.
• Image de texte : incluez les mots essentiels s’ils ne sont pas déjà disponibles sous forme de vrai texte à proximité.
• Logo : identifiez l’organisation quand le logo fournit cette information. Dans un lien d’accueil, le texte peut être « Nom de l’entreprise, accueil ».

Ne répétez pas la légende mot pour mot. La répétition ajoute du temps d’écoute sans apporter de sens. Utilisez l’outil Différence Texte pour comparer légende et texte alternatif si vous soupçonnez un doublon.

Comment décrire les graphiques et images complexes ?

Utilisez un attribut court pour identifier le graphique et son message principal, puis fournissez les données, relations ou étapes importantes dans le texte voisin. Une information complexe tient rarement bien dans un long attribut. Les descriptions visibles aident aussi les personnes malvoyantes ou ayant des difficultés cognitives.

Pour un graphique linéaire, indiquez le sujet et la tendance clé : « Les demandes d’assistance mensuelles sont passées de 120 en janvier à 210 en juin. » Ajoutez ensuite un tableau ou un paragraphe si les valeurs mensuelles exactes comptent.

Pour un diagramme, décrivez la séquence ou la relation dont dépend la page. Ne décrivez pas chaque forme, couleur de flèche ou position, sauf si elle change le sens. L’analyseur de lisibilité peut simplifier une longue description visible sans supprimer les étapes essentielles.

Erreurs courantes dans les textes alternatifs

Un mauvais texte alternatif n’est souvent ni trop long ni trop court. Il est hors sujet, répétitif ou écrit pour les moteurs de recherche plutôt que pour les personnes.

• Utiliser un nom de fichier comme « IMG_2048.jpg ».
• Écrire « image de » avant chaque description.
• Répéter la légende, le titre ou le paragraphe voisin.
• Accumuler des mots-clés produit que l’image ne communique pas.
• Décrire couleur ou position sans expliquer le sens.
• Donner une description parlée à une image décorative.
• Utiliser un alt vide pour une image qui est la seule étiquette d’un lien ou bouton.

Nettoyez les descriptions copiées avec le suppresseur d’espaces superflus afin que les retours à la ligne et mises en forme invisibles n’entrent pas dans le champ du CMS.

Comment vérifier le texte alternatif avant publication ?

Examinez l’image dans le contexte réel de la page. Déterminez sa fonction, retirez les informations répétées, testez la page sans l’image et confirmez que le remplacement permet la même tâche. Contrôlez ensuite le HTML ou la sortie du CMS pour vérifier la présence de l’attribut et son état vide pour une décoration.

1. Identifiez le type : informative, fonctionnelle, décorative, textuelle ou complexe.
2. Lisez le contenu environnant : évitez de répéter ce qui est déjà disponible.
3. Écrivez le remplacement : concentrez-vous sur la fonction et l’information utile.
4. Vérifiez la longueur : raccourcissez uniquement si le texte est redondant ou surchargé.
5. Contrôlez l’accessibilité visuelle : utilisez le simulateur de contraste si du texte ou un élément essentiel apparaît dans l’image.
6. Testez la sortie : confirmez qu’un alt vide est écrit comme attribut vide et non supprimé.

Les outils automatiques détectent les attributs manquants, mais ne peuvent pas décider si les mots sont utiles. Une révision humaine reste nécessaire, car la bonne description dépend du contexte.

La longueur du texte alternatif est une décision de qualité, pas un objectif SEO fixe. Les images simples demandent un remplacement concis, les images fonctionnelles une action claire, les décorations doivent rester silencieuses et les visuels complexes ont besoin de détails hors de l’attribut.

Rédigez la description près de l’image, puis utilisez le compteur de caractères pour repérer la longueur inutile. Gardez chaque mot qui aide à comprendre ou utiliser la page et retirez seulement les détails qui ne servent pas la fonction de l’image.