Comment rédiger un texte alternatif : guide pratique à l’usage des développeurs et des équipes de contenu

Selon le rapport WebAIM Million 2025, l’absence de texte alternatif affecte 55,5 % de toutes les pages d’accueil analysées — et parmi ces échecs, 44 % concernent des images liées, ce qui casse complètement la navigation pour les utilisateurs de lecteurs d’écran. Ce n’est pas un problème de niche. C’est la moitié du web qui laisse les personnes aveugles et malvoyantes bloquées devant des images qui ne disent rien. Si votre équipe publie des images sans réfléchir soigneusement au texte alternatif, vous ne manquez pas seulement une case de conformité — vous dites à une part significative de votre audience que leur expérience n’a pas d’importance.

Ce que le texte alternatif est réellement (et pourquoi c’est plus qu’une balise)

Le texte alternatif, ou alt text, est une description écrite intégrée dans l’attribut alt d’un élément HTML <img>. Lorsqu’un lecteur d’écran rencontre une image, il lit le texte alternatif à voix haute pour l’utilisateur. Quand une image ne se charge pas — à cause d’une connexion lente, d’une URL cassée ou d’un bloqueur de contenu — le texte alternatif s’affiche à sa place. Il est également indexé par les moteurs de recherche, ce qui en fait un signal SEO discret mais significatif.

Mais voici ce que beaucoup d’équipes ratent : le texte alternatif n’est pas seulement un filet de sécurité de secours. C’est le moyen principal par lequel les personnes aveugles et malvoyantes — environ 43,3 millions de personnes aveugles dans le monde, et 295 millions avec une basse vision modérée à sévère — vivent le contenu visuel sur le web. Les lecteurs d’écran comme NVDA et JAWS (les deux lecteurs d’écran de bureau les plus utilisés) annoncent le texte alternatif dès que le focus atteint une image. Si ce texte est absent, dénué de sens ou redondant, l’expérience utilisateur se dégrade immédiatement.

Les recherches sur les personnes aveugles et malvoyantes dressent un tableau saisissant de ce qui se passe en pratique. Certains utilisateurs déclarent ignorer complètement les images sur les sites web parce que, d’après leur expérience, le texte alternatif n’est jamais utile. D’autres passent les images de produits sur les sites d’e-commerce et se fient plutôt aux avis des utilisateurs, car un texte alternatif comme "image001.jpg" ou "photo" ne leur dit rien. Ce n’est pas un problème de lecteur d’écran — c’est un problème de contenu, et c’est un problème que votre équipe peut résoudre.

Comprendre le texte alternatif comme une responsabilité de contenu — et pas seulement comme une tâche de développeur — est le premier changement de mentalité que chaque équipe doit opérer. Le développeur implémente l’attribut ; l’équipe de contenu comprend le contexte. Les deux sont essentiels pour bien faire les choses.

Le paysage légal et de conformité

Le texte alternatif n’est pas optionnel si vous vous souciez du risque juridique. Le critère de succès WCAG 1.1.1 (Contenu non textuel) est une exigence de niveau A — le niveau de conformité le plus bas et le plus fondamental. Le rater signifie échouer à tout audit formel d’accessibilité. Aux États-Unis, l’ADA a été appliquée aux sites web dans des milliers de cas, avec 4 605 poursuites liées à des sites web au titre de l’ADA déposées rien qu’en 2024. L’absence de texte alternatif est l’une des violations les plus citées dans les lettres de mise en demeure précisément parce qu’elle est facilement détectable, objectivement mesurable et bloque directement l’accès au contenu principal.

Au-delà de l’ADA, l’European Accessibility Act (EAA) est devenue applicable le 28 juin 2025. Si votre organisation sert des clients dans l’UE, la non-conformité peut entraîner des sanctions allant jusqu’à 100 000 € ou 4 % du chiffre d’affaires annuel. WCAG 2.2 niveau AA est largement reconnu comme la référence pour la conformité à l’EAA, et ses exigences en matière de texte alternatif au titre du critère 1.1.1 sont inchangées par rapport aux versions précédentes — toutes les images informatives doivent avoir des alternatives textuelles déterminables par programme.

Au Canada, l’Accessibility for Ontarians with Disabilities Act (AODA) impose de la même manière la conformité aux WCAG pour les organisations des secteurs public et privé. La Section 508 dans le contexte fédéral américain a ses propres exigences parallèles. La conclusion est cohérente dans toutes les juridictions : le texte alternatif n’est pas un simple plus, et l’environnement réglementaire se durcit, il ne se relâche pas.

WCAG 1.1.1 est de niveau A — le niveau de conformité le plus basique. Le rater signifie échouer à tout audit d’accessibilité, et c’est la violation la plus facile à détecter pour les outils automatisés et les équipes juridiques.

Le cadre de décision : quelles images ont besoin de quoi

L’une des idées reçues les plus courantes est que chaque image a besoin d’une description textuelle. C’est faux — et ajouter un texte alternatif inutile aux images décoratives rend en fait l’expérience pire pour les utilisateurs de lecteurs d’écran, qui doivent alors écouter du bruit qui n’apporte aucune valeur. La vraie compétence consiste à savoir dans quelle catégorie se situe chaque image. Voici un cadre pratique :

• Images informatives — Photos, illustrations ou graphiques qui véhiculent un contenu ou un sens non présent dans le texte environnant. Elles nécessitent un texte alternatif descriptif qui communique la même information que l’image.
• Images fonctionnelles — Images utilisées comme boutons, liens ou contrôles (par exemple, une icône de loupe qui lance une recherche, ou un logo qui renvoie à la page d’accueil). Le texte alternatif doit décrire la fonction, pas l’apparence visuelle : alt='Search', et non alt='Icône de loupe'.
• Images décoratives — Fioritures visuelles qui ajoutent une valeur esthétique mais n’ont aucune signification : motifs d’arrière-plan, séparateurs, illustrations purement décoratives. Elles doivent avoir un attribut alt vide (alt=''), ce qui indique au lecteur d’écran d’ignorer complètement l’image.
• Images de texte — Captures d’écran ou graphiques contenant des mots. La bonne pratique est de les éviter complètement et d’utiliser à la place du vrai texte stylé. Lorsqu’elles sont inévitables, le texte alternatif doit reproduire textuellement le texte présent dans l’image.
• Images complexes — Diagrammes, graphiques, cartes et infographies contenant des données denses. Un court résumé en texte alternatif est nécessaire, ainsi qu’une description structurée plus longue dans le corps de la page ou liée à partir de l’image.

Notez qu’un texte alternatif vide (alt='') n’est pas la même chose qu’un attribut alt manquant. Une image sans aucun attribut alt peut amener le lecteur d’écran à lire le nom de fichier ou l’URL de l’image à voix haute — ce qui est presque toujours pire que le silence. Incluez toujours l’attribut, même lorsque sa valeur est intentionnellement vide.

Rédiger un texte alternatif qui fonctionne vraiment : règles pratiques

Un bon texte alternatif est plus difficile à écrire qu’il n’y paraît. Voici les règles concrètes qui distinguent les descriptions utiles du bruit :

• Restez concis. Visez moins de 125 caractères. Les lecteurs d’écran comme JAWS et NVDA peuvent tronquer un texte alternatif plus long en plein milieu d’une phrase, coupant exactement l’information que vous avez pris soin de fournir. Si l’image est suffisamment complexe pour nécessiter plus, c’est le signe que vous avez besoin d’une description longue complémentaire.
• Ne commencez pas par "Image de" ou "Photo de". Les lecteurs d’écran annoncent automatiquement qu’un élément est une image avant de lire le texte alternatif. Écrire alt='Image d’une femme souriante' amène le lecteur d’écran à dire "image, image d’une femme souriante" — ce qui est redondant et fait perdre du temps à l’auditeur.
• Décrivez le sens, pas seulement l’apparence. Le texte alternatif doit communiquer la même information ou fonction que l’image. Si vous montrez un graphique de la croissance du chiffre d’affaires au T3, n’écrivez pas alt='Diagramme en barres'. Écrivez plutôt quelque chose comme alt='Diagramme en barres montrant une hausse de 22 % du chiffre d’affaires du T3 d’une année sur l’autre', puis fournissez les données complètes dans le texte environnant.
• Adaptez-vous au contexte. La même photographie peut nécessiter un texte alternatif différent selon l’endroit où elle est utilisée. Une photo d’un ordinateur portable sur un bureau utilisée dans une section "Rencontrez notre équipe" peut nécessiter un texte alternatif décrivant l’espace de travail ; utilisée dans une fiche produit, elle doit décrire les caractéristiques et l’apparence de l’ordinateur portable.
• N’entassez pas de mots-clés. Le texte alternatif est indexé par les moteurs de recherche, mais le bourrer de mots-clés est à la fois une mauvaise expérience utilisateur et une violation de l’intention des WCAG. Écrivez d’abord pour l’utilisateur.
• Utilisez une grammaire et une ponctuation correctes. Les lecteurs d’écran transforment le texte en parole, et la ponctuation affecte le rythme et la clarté. Un fragment de phrase se lit moins naturellement qu’une pensée complète.

Le texte alternatif n’a pas besoin d’être une description froide et objective. Il peut — et parfois devrait — transmettre des nuances, du contexte et même de l’émotion lorsque ces qualités sont pertinentes pour l’expérience de l’utilisateur du contenu.

Exemples de code : bon et mauvais

La théorie, c’est une chose. Voyons comment ces principes se traduisent en HTML réel.

Image informative — mauvais texte alternatif :

<img src='team-photo.jpg' alt='photo'>

Image informative — bon texte alternatif :

<img src='team-photo.jpg' alt='Accsible engineering team gathered around a whiteboard during a product sprint meeting'>

Image fonctionnelle (logo lié) — mauvais texte alternatif :

<a href='/'>
  <img src='logo.svg' alt='logo'>
</a>

Image fonctionnelle (logo lié) — bon texte alternatif :

<a href='/'>
  <img src='logo.svg' alt='Accsible — return to homepage'>
</a>

Image décorative — implémentation correcte :

<img src='decorative-wave-divider.svg' alt='' role='presentation'>

Image complexe (graphique) — approche correcte avec description longue liée :

<img
  src='q3-revenue-chart.png'
  alt='Bar chart: Q3 revenue up 22% YoY. Full data table below.'
  aria-describedby='chart-description'
>
<div id='chart-description'>
  <!-- Full tabular data or structured text description here -->
</div>

Pour les boutons d’icône qui n’ont pas de libellé textuel visible, utilisez aria-label sur le bouton lui-même et définissez alt='' sur l’image de l’icône pour éviter une double annonce :

<button aria-label='Close dialog'>
  <img src='close-icon.svg' alt=''>
</button>

Gérer des types d’images spécifiques

Images de produits en e-commerce : Ce sont parmi les contextes de texte alternatif les plus critiques sur le web. Les utilisateurs aveugles dépendent entièrement du texte alternatif pour comprendre ce qu’ils envisagent d’acheter. Se contenter de décrire le nom du produit est insuffisant. Incluez le matériau, la couleur, les caractéristiques visuelles clés et toute variante visuellement identifiable. Par exemple : alt='Slim-fit wool blazer in navy blue with gold buttons and notched lapels' est bien plus utile que alt='Blazer'.

Logos : Les logos ne sont jamais décoratifs. Ils nécessitent un texte alternatif qui inclut le nom de l’organisation et tout slogan ou descriptif significatif apparaissant dans l’image du logo. Si le logo est également un lien, le texte alternatif doit décrire sa destination, comme indiqué plus haut.

Infographies : Elles sont notoirement difficiles à gérer correctement. Un seul attribut alt ne peut pas porter le poids informationnel d’une infographie complexe. La bonne approche est un texte alternatif court, de niveau résumé (par exemple, alt='Infographic summarizing five steps of our onboarding process') associé à une version textuelle structurée de la même information visible sur la page.

Images de personnes : Inclure les noms lorsque les personnes sont identifiées est utile, en particulier dans les contextes éditoriaux ou d’actualité. Décrivez ce que la personne fait ou ce que l’image communique, pas seulement son apparence physique. Évitez les descriptions qui réduisent une personne à ses caractéristiques démographiques.

Images d’arrière-plan et images CSS : Les images appliquées via CSS background-image n’ont pas d’attribut alt disponible, elles ne doivent donc être utilisées que pour des besoins véritablement décoratifs. Si une image doit transmettre un sens, elle a sa place dans le HTML en tant qu’élément <img> avec un texte alternatif approprié.

Intégrer le texte alternatif dans votre flux de travail

L’une des raisons pour lesquelles le texte alternatif reste cassé à grande échelle est qu’il est traité comme une réflexion de dernière minute — quelque chose qu’un scanner automatisé signale après le lancement, entraînant un correctif précipité. La solution consiste à déplacer le texte alternatif en amont dans vos flux de travail de contenu et de développement.

Pour les équipes de contenu, cela signifie établir un guide de style interne pour le texte alternatif qui couvre vos types d’images les plus courants. Si votre site publie des images de produits, des images de couverture d’articles de blog, des photos d’événements et des graphiques de données, chaque catégorie mérite une norme documentée avec des exemples de bonnes et de mauvaises descriptions. Lorsque les rédacteurs et éditeurs téléversent des images, ils doivent penser au texte alternatif au même moment où ils réfléchissent aux légendes et au choix des images.

Pour les développeurs, cela signifie intégrer des champs de texte alternatif dans les modèles de CMS et les marquer comme obligatoires — et non optionnels — pour les composants d’image non décoratifs. Lorsqu’un composant accepte une image, l’interface doit demander un texte alternatif et distinguer les contextes informatifs et décoratifs. Évitez de remplir automatiquement l’attribut alt avec le nom de fichier de l’image ou le texte de la légende, qui sont des éléments différents remplissant des fonctions différentes.

Pour les responsables QA et conformité, les outils de scan automatisés (y compris les solutions de surcouche d’accessibilité comme Accsible) peuvent détecter à grande échelle les images dont les attributs alt sont manquants ou vides, et les signaler en temps réel. Mais les outils automatisés ne peuvent pas évaluer si le texte alternatif existant est réellement significatif — ce jugement nécessite un examinateur humain. Intégrez des contrôles manuels ponctuels dans votre cadence d’audit d’accessibilité, et incluez l’examen de la qualité du texte alternatif dans tout critère d’acceptation de nouvelle fonctionnalité impliquant des images.

Lorsque la même image est réutilisée sur plusieurs pages ou dans plusieurs contextes, souvenez-vous que le texte alternatif approprié peut changer. Une photo du siège social d’une entreprise utilisée sur une page "Contactez-nous" et sur une page "À propos de notre culture" peut justifier des descriptions différentes selon ce que chaque page cherche à communiquer. Les plateformes CMS comme WordPress permettent des substitutions de texte alternatif au niveau de la publication précisément pour cette raison.

Erreurs courantes à éviter

Même les équipes qui prennent le texte alternatif au sérieux commettent des erreurs récurrentes. Voici les schémas qu’il vaut la peine de surveiller activement :

• Utiliser le nom de fichier comme texte alternatif. Un texte alternatif de IMG_4521.jpg ou hero-banner-v3-final.png est pire qu’inutile — il signale activement aux utilisateurs de lecteurs d’écran que personne n’a pensé à eux.
• Rendre le texte alternatif identique à la légende adjacente. Les légendes et le texte alternatif servent des publics et des objectifs différents. Une légende est un contexte supplémentaire pour les utilisateurs voyants ; le texte alternatif remplace l’image pour les utilisateurs qui ne peuvent pas la voir. Ils peuvent se recouper, mais ne doivent pas être copiés-collés de manière interchangeable.
• Ajouter du texte alternatif à chaque image sans discernement. Donner aux images décoratives un texte alternatif descriptif oblige les utilisateurs de lecteurs d’écran à traverser un contenu non pertinent. La discipline qui consiste à décider "cette image a-t-elle besoin d’une description, et si oui, laquelle ?" est aussi importante que l’écriture elle-même.
• Écrire des descriptions vagues, sans contexte. Un texte alternatif comme alt='homme souriant' pour une photo de votre PDG lors d’un lancement de produit ne dit presque rien à l’utilisateur sur la raison d’être de l’image ou sur ce qu’elle signifie dans son contexte.
• Ignorer le texte alternatif sur les SVG. Les SVG en ligne ont eux aussi besoin de noms accessibles, généralement via aria-label sur l’élément <svg> ou un élément <title> comme premier enfant, combiné avec role='img'.

<!-- SVG with accessible name -->
<svg role='img' aria-labelledby='svg-title'>
  <title id='svg-title'>Quarterly revenue growth, Q1 to Q4 2024</title>
  <!-- SVG paths -->
</svg>

Points clés à retenir

• Toutes les images n’ont pas besoin d’une description textuelle. Les images décoratives doivent utiliser alt='' pour indiquer aux lecteurs d’écran de les ignorer — mais ne supprimez jamais complètement l’attribut alt, sinon le lecteur d’écran peut annoncer le nom de fichier à la place.
• Gardez le texte alternatif sous les 125 caractères pour les images informatives ; les lecteurs d’écran peuvent couper les chaînes plus longues, et la concision améliore la compréhension à l’écoute. Pour les images complexes, associez un court résumé en texte alternatif à une description textuelle complète dans le corps de la page.
• Décrivez la fonction, pas seulement la forme. Pour les images liées et fonctionnelles, le texte alternatif doit dire à l’utilisateur ce qui va se passer ou où il ira — pas à quoi ressemble l’image. Pour les images informatives, communiquez le sens, pas seulement le contenu visuel.
• Intégrez le texte alternatif en amont dans votre flux de travail, et non comme un correctif après le lancement. Faites-en un champ obligatoire dans votre CMS, incluez-le dans les guides de style de contenu, et ajoutez un contrôle qualité à votre processus de QA — les outils automatisés détectent l’absence de texte alternatif, mais les humains doivent évaluer s’il est significatif.
• Les enjeux juridiques et réglementaires sont réels et en hausse. Les litiges ADA citant l’absence de texte alternatif se comptaient par milliers en 2024, et l’Accessibility Act de l’UE est désormais en vigueur. Traiter le texte alternatif comme une réflexion après coup n’est pas une stratégie de conformité viable.