29 octobre 2026

Alternative textuelle d'une image : l'arbre de décision du W3C, cas par cas

Une alternative textuelle d'image est le texte qui remplace une image pour les personnes qui ne peuvent pas la voir : il peut être lu à voix haute par une synthèse vocale, affiché ou converti en braille. Pour une image HTML, elle se renseigne dans l'attribut alt de l'élément img. La vraie difficulté n'est pas de savoir où l'écrire, mais quoi écrire : une description, la fonction d'un lien, le texte contenu dans l'image, ou rien du tout (alt vide). Le W3C propose pour cela un arbre de décision en cinq questions, posées dans l'ordre. Cet article vous le présente pas à pas, le complète par des exemples tirés de la page « Understanding 1.1.1 » du W3C et présente les erreurs que le W3C répertorie comme des échecs du critère 1.1.1 « Contenu non textuel » dans sa documentation d'accompagnement des WCAG.

Ce que les WCAG exigent pour l'alternative textuelle d'une image

Le critère de succès 1.1.1 « Contenu non textuel » est de niveau A. Il pose que tout contenu non textuel présenté à l'utilisateur dispose d'une alternative textuelle qui remplit une fonction équivalente, sauf dans quelques situations précises. Son objectif, résumé par le W3C : rendre l'information non textuelle accessible à davantage de personnes.

Pourquoi du texte ? Parce qu'il peut être restitué par n'importe quel canal sensoriel (visuel, auditif ou tactile). Une personne qui ne voit pas une photo peut se faire lire son alternative textuelle par une synthèse vocale ; une personne sourde et aveugle peut lire ce texte en braille. Le W3C ajoute que les alternatives textuelles peuvent aussi aider certaines personnes qui ont du mal à comprendre le sens des photos, dessins, graphiques ou animations, et qu'elles permettent de rechercher le contenu non textuel et de le réutiliser.

Le critère prévoit des cas particuliers que vous pouvez croiser sur un site :

Contrôles et saisies (par exemple une image servant de bouton d'envoi) : ils doivent avoir un nom qui décrit leur fonction.
Médias temporels, tests ou exercices qui seraient invalidés par un texte, contenus destinés principalement à créer une expérience sensorielle spécifique : l'alternative fournit au minimum une identification descriptive.
CAPTCHA : l'alternative identifie et décrit sa finalité, et d'autres formes de CAPTCHA, utilisant d'autres sens, sont proposées pour répondre aux besoins liés à différents handicaps.
Décoration pure, mise en forme visuelle ou contenu non présenté à l'utilisateur : il doit être implémenté de façon à pouvoir être ignoré par les technologies d'assistance.

L'arbre de décision du W3C pour choisir l'attribut alt

L'arbre de décision du W3C décrit comment utiliser l'attribut alt de l'élément img selon la situation. Posez les questions dans l'ordre : pour les quatre premières, une réponse « oui » vous donne votre consigne ; si c'est « non », passez à la suivante.

1. L'image contient-elle du texte ? Si ce texte figure aussi en vrai texte à proximité, ou s'il n'est là que pour un effet visuel : alt vide (image décorative). Si le texte a une fonction précise, par exemple une icône : l'alt communique cette fonction (image fonctionnelle). Si le texte de l'image n'est présent nulle part ailleurs : l'alt reprend ce texte (image texte).
2. L'image est-elle utilisée dans un lien ou un bouton, et serait-il difficile, voire impossible, de comprendre ce que fait ce lien ou ce bouton sans elle ? Si oui : l'alt indique la destination du lien ou l'action déclenchée (image fonctionnelle).
3. L'image apporte-t-elle du sens à la page ou au contexte ? S'il s'agit d'un graphisme simple ou d'une photo : une brève description qui transmet ce sens (image informative). S'il s'agit d'un graphique ou d'une information complexe : l'information doit être donnée ailleurs dans la page (image complexe). Si elle montre un contenu redondant avec du vrai texte voisin : alt vide.
4. L'image est-elle purement décorative, ou non destinée aux utilisateurs ? Si oui : alt vide (image décorative).
5. Votre cas n'est pas listé, ou vous ne savez pas quel texte écrire ? L'arbre ne couvre pas tous les cas : reportez-vous au tutoriel Images complet du W3C.

Image informative, fonctionnelle ou complexe : exemples d'alternatives

Les exemples de la page « Understanding 1.1.1 » montrent qu'une bonne alternative dépend du contexte, pas seulement de ce que l'image représente. Les alternatives citées sont traduites de l'anglais, version originale entre parenthèses quand elle est courte.

Une même image, deux alternatives. Une image du globe sert, sur un site de voyages, de lien vers la rubrique des voyages internationaux : son alternative est « Voyages internationaux » (International Travel). La même image, utilisée comme lien sur le site d'une université, a pour alternative « Campus internationaux » (International Campuses). Pour une image dont dépend la compréhension d'un lien, c'est la destination qui compte. De même, la vignette de la une d'un journal qui renvoie à l'accueil du « Smallville Times » a simplement pour alternative « Smallville Times ».

Une même photo, deux niveaux de détail. Dans un article d'actualité sur un sommet international, la photo de deux dirigeants qui se serrent la main a pour alternative « Le président X du pays X serre la main du Premier ministre Y du pays Y ». Sur un site qui analyse les subtilités des relations diplomatiques, la même photo a une première alternative plus précise, qui ajoute la date (« … le 2 janvier 2009 »), complétée par une description de la pièce, des expressions des visages et des autres personnes présentes, qui peut figurer sur la même page ou dans un fichier associé à l'image par un lien ou un autre mécanisme programmatique standard.

Un graphique de données. Pour un diagramme en barres comparant les ventes de juin, juillet et août, l'alternative courte indique « Figure 1 – Ventes de juin, juillet et août » (Figure one - Sales in June, July and August). Une description longue précise le type de graphique et résume les données, les tendances et leurs implications, de façon comparable à ce qu'apporte le graphique ; lorsque c'est possible et pratique, les données elles-mêmes sont fournies dans un tableau.

Une image interactive. Pour un plan d'étage cliquable qui mène à la page de chaque salle, l'alternative courte décrit l'image et sa fonction : « Plan du bâtiment. Sélectionnez une salle pour plus d'informations. » (Building floor plan. Select a room for more information.)

Images décoratives : quand utiliser un alt vide

Certains contenus non textuels ne sont pas destinés à être vus ou compris par l'utilisateur. Le W3C cite comme exemples des images transparentes servant à décaler du texte, une image invisible servant à suivre des statistiques d'utilisation, ou une volute décorative dans un coin de page qui ne transmet aucune information. Ces images ne doivent pas être décrites, mais elles ne doivent pas non plus être laissées sans marquage.

Mettre un texte sur ces éléments ne fait que distraire les utilisateurs de lecteurs d'écran. À l'inverse, ne pas les marquer du tout laisse ces personnes se demander ce qu'elles ont manqué, alors qu'elles n'ont rien manqué. Le critère exige donc de les implémenter de façon à ce que les technologies d'assistance puissent les ignorer ; parmi les techniques listées par le W3C pour ce cas figurent un alt vide sans attribut title sur l'élément img, ou une image décorative insérée en CSS. Attention : une information ne doit jamais être transmise uniquement par une image d'arrière-plan CSS, c'est un échec répertorié du critère (F3).

Les erreurs d'alternative textuelle répertoriées comme échecs

Sur sa page « Understanding 1.1.1 », le W3C répertorie des « échecs » (failures) du critère. Voici les mauvais exemples à rechercher lors d'un audit de vos images :

Omettre l'attribut alt ou l'alternative textuelle sur les éléments img, area et input de type image (F65).
Utiliser comme alternative un texte qui n'en est pas un, par exemple un nom de fichier ou un texte de remplissage (F30).
Donner un alt non vide, comme alt="spacer" ou alt="image", à une image qui devrait être ignorée (F39).
Ne pas marquer en HTML une image décorative de façon à ce que les technologies d'assistance l'ignorent (F38).
Transmettre une information uniquement par une image d'arrière-plan CSS (F3).
Oublier dans l'alternative une information portée par des différences de couleur dans l'image (F13).
Ne pas mettre à jour l'alternative quand le contenu non textuel change (F20).
Utiliser de l'art ASCII ou des caractères d'apparence similaire pour représenter du texte, sans alternative textuelle (F72, F71).
Fournir une description longue qui ne remplit pas la même fonction, ou qui ne présente pas la même information que l'image (F67).

Méthode pour vérifier les alternatives de vos images

Pour chaque image d'une page, appliquez l'arbre de décision puis confrontez le résultat aux échecs ci-dessus. Concrètement : repérez les images sans attribut alt, celles dont l'alt est un nom de fichier, celles qui sont décoratives mais décrites, puis relisez les images placées dans des liens et des boutons en vous demandant si l'alternative annonce bien la destination ou l'action. Pour les graphiques, vérifiez qu'une description longue existe, dans la page ou à un autre emplacement relié par un lien placé juste à côté de l'image, et, si possible, un tableau des données.

Le W3C rappelle aussi que l'alternative devrait correspondre à la langue du contenu d'origine, normalement la langue par défaut de la page. Vous pouvez commencer par un test gratuit de votre site sur Conformly, puis activer la surveillance continue pour repérer les nouvelles images publiées sans alternative.

Questions fréquentes

Comment écrire une bonne alternative textuelle pour une image ?

Suivez l'ordre de l'arbre du W3C. Si l'image contient du texte absent ailleurs, reprenez ce texte. Si elle est dans un lien ou un bouton et qu'on ne comprendrait pas ce que fait ce lien ou ce bouton sans elle, décrivez la destination ou l'action. Si elle apporte du sens et qu'il s'agit d'un graphisme simple ou d'une photo, donnez une brève description qui transmet ce sens dans son contexte ; s'il s'agit d'un graphique ou d'une information complexe, donnez cette information ailleurs dans la page ; si elle ne fait que reprendre du vrai texte voisin, laissez l'alt vide. Si elle est purement décorative, laissez aussi l'alt vide.

Quand faut-il mettre un alt vide ?

Selon l'arbre de décision du W3C : quand le texte de l'image est déjà présent en vrai texte à proximité, quand ce texte n'est là que pour un effet visuel, quand l'image est redondante avec du texte voisin, et quand l'image est purement décorative ou non destinée aux utilisateurs.

Peut-on supprimer l'attribut alt d'une image décorative ?

Non. Omettre l'attribut alt sur un élément img est un échec répertorié du critère 1.1.1 (F65). Une image décorative doit être marquée pour être ignorée par les technologies d'assistance, par exemple avec un alt vide et sans attribut title, ou être insérée en CSS.

Quelle alternative pour un graphique ou un schéma complexe ?

Une alternative courte qui identifie le graphique, complétée par une description longue qui indique le type de graphique et résume les données, les tendances et leurs implications de façon comparable au graphique, placée ailleurs dans la page ou à un autre emplacement relié par un lien juste à côté de l'image. Lorsque c'est possible, fournissez les données dans un tableau.

Le nom du fichier peut-il servir d'attribut alt ?

Non. Utiliser un nom de fichier ou un texte de remplissage comme alternative est un échec répertorié du critère 1.1.1 (F30), tout comme un alt du type « image » ou « spacer » sur une image qui devrait être ignorée (F39).

Sources

Article appuyé sur les sources officielles citées en fin de page.