Les images

Essayez-les

Remplacer chaque image par son alternative

Le même dessin est posé trois fois, dans trois rôles. Actionnez le bouton : les images cèdent la place à ce qu’elles exposent réellement, lu sur le document au moment du basculement. La première garde tout son sens, la deuxième disparaît sans rien coûter, la troisième continue de dire où elle mène.

Cette démo existe aussi en page autonome.

La question qui décide de tout

L’image porte-t-elle de l’information ? Tout le reste en découle, et il n’y a que deux réponses.

Le test tient en un geste : retirez l’image par la pensée. Si la page perd quelque chose qu’aucun texte voisin ne dit, l’image est porteuse d’information — son alternative doit rendre ce quelque chose. Si la page ne perd rien, l’image est de décoration — son alternative doit être vide.

La même photographie change de camp selon l’endroit où on la pose. Le portrait d’un ministre est décoratif à côté d’un paragraphe qui le nomme et le décrit ; il devient informatif dans un trombinoscope, où il est le seul moyen de reconnaître la personne. On ne décide donc pas devant le fichier, mais devant la page.

Reste un troisième état, qui n’est pas un choix : l’image sans attribut alt du tout. Ce n’est ni une image informative ni une image décorative, c’est une image dont personne ne sait quoi faire — et les lecteurs d’écran s’en tirent en lisant l’URL du fichier.

L’erreur courante

Décrire l’image au lieu de transmettre son information.

<!-- À ne pas faire -->
<img src="taux-2025.png" alt="Graphique en barres" />

L’alternative est là, elle n’est ni vide ni absente, et un outil automatique la déclarera présente. Pourtant l’utilisateur qui l’entend apprend exactement ce qu’il savait déjà : qu’il y a un graphique. Les chiffres, eux, restent dans les pixels.

<!-- Ce que l'image dit vraiment -->
<img
	src="taux-2025.png"
	alt="Le taux moyen de conformité passe de 38 % en 2023 à 61 % en 2025."
/>

La règle pratique : écrivez ce que vous diriez au téléphone à quelqu’un qui ne voit pas l’écran. Personne ne dit « il y a un graphique en barres » ; on dit ce que le graphique montre.

Trois variantes de la même faute, et ce qu’elles coûtent :

• alt="image", alt="photo", ou le nom du fichier laissé tel quel. La lecture est interrompue par « image, I M G tiret 2 0 4 3 point J P G » sans qu’aucune information n’ait été transmise.
• Un title à la place de l’alt. Le référentiel le compte parmi les sources possibles de l’alternative textuelle, mais en dernier rang, et le glossaire recommande l’alt, « la seule technique totalement supportée par les aides techniques » (note 5), en réservant sur le support du title (note 6). L’info-bulle qu’il affiche, elle, n’apparaît qu’au survol de la souris : ni au clavier, ni au doigt.
• Sur un lien-image, une alternative qui décrit le dessin — alt="loupe". Le lien s’annonce « loupe, lien », et rien ne dit où il mène.

Le code, pas à pas

1. L’image informative : transmettre

<img src="taux-2025.png" alt="Le taux moyen de conformité passe de 38 % en 2023 à 61 % en 2025." />

L’alternative n’est pas une description, c’est un remplacement. Elle occupe la place de l’image et doit y tenir le même rôle.

Elle reste courte : le RGAA demande qu’elle soit « courte et concise » (test 1.3.9), et le glossaire précise qu’« une longueur maximale de 80 caractères est fortement recommandée » — parce qu’une plage braille ou une loupe d’écran la restitue par fragments. Au-delà, ce n’est plus une alternative, c’est une description détaillée qui commence (voir le point 4).

Inutile d’écrire « image de » ou « photo de » : la nature de l’élément est déjà annoncée par le lecteur d’écran, qui dirait alors « image, image de… ».

2. L’image décorative : alt="", et rien d’autre

<img src="ornement.svg" alt="" />

Deux écritures se ressemblent et donnent des résultats opposés. alt="" retire l’image de l’arbre d’accessibilité : elle n’existe plus pour les technologies d’assistance, ce qui est exactement le but. Pas d’attribut alt du tout, et l’image reste, sans nom, à charge du lecteur d’écran d’inventer quelque chose.

Le test 1.2.1 est explicite sur un point qu’on oublie : l’image doit être « dépourvue de tout autre attribut permettant de fournir une alternative textuelle ». Un title="Ornement" posé à côté d’un alt="" redonne un nom à l’image, et annule le vide qu’on venait de poser.

<!-- À ne pas faire : le title rend à l'image le nom que l'alt vide lui retirait -->
<img src="ornement.svg" alt="" title="Ornement" />

Sur une <img> ou une <area>, le référentiel accepte aussi aria-hidden="true" ou role="presentation" à la place de l’alt vide (tests 1.2.1 et 1.2.2). Sur une <svg> en ligne, un <object>, un <canvas> ou un <embed>, il n’y a pas d’alt à vider et le référentiel n’accepte que aria-hidden="true" (tests 1.2.3 à 1.2.6).

Et il reste une option plus radicale : une image purement décorative n’a souvent rien à faire dans le HTML. Posée en background-image par le CSS, elle est là où est sa place, et la question de son alternative ne se pose plus.

3. Le lien-image : l’alternative dit la destination

<a href="/rapport-2025.pdf">
	<img src="picto-pdf.svg" alt="Le rapport d'audit 2025 (PDF, 1,2 Mo)" />
</a>

Quand l’image est le seul contenu du lien, son alternative devient l’intitulé du lien. Le glossaire le dit et en tire la conséquence : dans ce cas, l’alternative « devrait être évaluée avec la thématique “Liens” » — c’est-à-dire jugée sur ce qu’un intitulé de lien doit dire, pas sur la fidélité au dessin.

Le cas inverse est aussi fréquent : si le lien porte déjà son texte, l’icône qui l’accompagne est décorative.

<a href="/rapport-2025.pdf">
	<img src="picto-pdf.svg" alt="" />
	Le rapport d'audit 2025 (PDF, 1,2 Mo)
</a>

Sans ce alt="", l’intitulé serait annoncé deux fois de suite.

4. L’image complexe : une description détaillée en plus

Un graphique, un schéma, un organigramme, une carte, une infographie : leur contenu ne tient pas en une phrase. Il faut alors les deux — une alternative courte qui dit ce que c’est et où trouver le reste, et une description détaillée qui donne les données.

<figure role="figure" aria-label="Taux moyen de conformité des huit sites audités">
	<img
		src="taux-2025.png"
		alt="Évolution du taux moyen de conformité, détaillée dans le tableau ci-dessous."
	/>
	<figcaption>Taux moyen de conformité des huit sites audités</figcaption>
</figure>

<table>
	…
</table>

Le role="figure" et l’aria-label ne sont pas décoratifs : dès qu’une image porte une légende en <figcaption>, le critère 1.9 s’applique et réclame ces deux attributs. La note technique du critère 1.6 le rappelle pour ce cas précis — une description détaillée « peut être implémentée via une balise <figcaption>, dans ce cas le critère 1.9 doit être vérifié ». Le détail est au point 5.

Le critère 1.6 offre trois voies pour une balise <img> : un attribut longdesc, une alternative qui renvoie vers une description adjacente, ou un lien ou bouton adjacent qui y mène. longdesc reste accepté par le référentiel, mais les navigateurs courants ne l’exposent plus : les deux autres voies sont celles qui atteignent quelqu’un.

Pour un graphique, la meilleure description détaillée est presque toujours un tableau de données. Il porte les mêmes chiffres, il est lisible par tout le monde, et il se navigue cellule par cellule.

Ce qu’elle ne doit pas être : le récit de l’apparence. « Un graphique à trois barres bleues, de hauteur croissante, avec un axe horizontal » ne dit toujours pas combien.

5. La légende : quatre conditions, pas deux

<figure
	role="figure"
	aria-label="Atelier de sensibilisation, 12 mars 2025. Photo : service communication."
>
	<img src="salle-audit.jpg" alt="…" />
	<figcaption>Atelier de sensibilisation, 12 mars 2025. Photo : service communication.</figcaption>
</figure>

Une légende posée dans un simple <p> sous l’image se lit comme n’importe quel paragraphe : rien ne la rattache à l’image. <figure> établit le groupe et <figcaption> désigne la légende — mais c’est là qu’on s’arrête trop tôt. Le test 1.9.1 demande quatre conditions cumulatives : l’image et sa légende adjacente sont contenues dans une balise <figure> ; cette <figure> possède un role="figure" ou un role="group" ; elle possède un aria-label dont le contenu est identique à celui de la légende ; et la légende est contenue dans un <figcaption>. Les deux premières lignes de HTML n’en remplissent que deux.

Le doublon aria-label / <figcaption> surprend, et il est pourtant demandé tel quel : le rôle figure seul ne porte pas de nom accessible fiable d’un lecteur d’écran à l’autre — selon les combinaisons, le <figcaption> nomme le groupe, ou n’est lu que comme du texte suivant l’image. L’aria-label recopié mot pour mot donne au groupe un nom que tous restituent. Recopié mot pour mot : un aria-label qui résume ou abrège la légende échoue à la troisième condition.

Cette exigence vaut dès qu’il y a une légende, y compris quand le <figcaption> sert de description détaillée à une image complexe — c’est le cas du point 4.

L’alternative et la légende ne disent pas la même chose. L’alternative remplace l’image et ne s’adresse qu’à ceux qui ne la voient pas ; la légende la commente et s’adresse à tout le monde. Recopier l’une dans l’autre fait entendre deux fois le même texte.

6. L’image texte : du texte stylé plutôt qu’une image

Un titre, un slogan, un bouton, une citation composés dans un fichier image : c’est ce que le RGAA appelle une image texte. Le coût est réel — le texte ne se met pas à l’échelle sans flou, ne suit pas les réglages de couleur ou d’espacement de l’utilisateur, ne se sélectionne pas, ne se traduit pas, et n’est pas trouvé par la recherche dans la page.

Le critère 1.8 demande de la remplacer par du texte stylé « si possible » et « hors cas particuliers » : c’est une obligation, mais une obligation qui admet que tout ne se refait pas en CSS. Ce qui ne s’admet pas, en revanche, c’est l’absence d’alternative : une image texte qui reste porte, comme les autres, le critère 1.1.

7. SVG, canvas, bouton image, et le reste

Les mêmes règles, sur d’autres balises — seul l’attribut change.

<!-- SVG en ligne, porteuse d'information : role="img" et une alternative -->
<svg role="img" viewBox="0 0 24 24">
	<title>Trois sites sur huit sont conformes.</title>
	…
</svg>

<!-- SVG en ligne, de décoration -->
<svg aria-hidden="true" viewBox="0 0 24 24">…</svg>

<!-- Bouton image : l'alt est l'intitulé du bouton -->
<input type="image" src="loupe.svg" alt="Rechercher" />

Une <svg> porteuse d’information demande role="img" et une alternative (test 1.1.5) : le rôle seul ne nomme rien. Une <svg> décorative demande aria-hidden="true", sans <title> ni <desc> (test 1.2.4) — et le glossaire ajoute qu’une balise portant role="img" ne peut être décorative qu’à cette condition.

Une image en background-image n’est visible d’aucune technologie d’assistance. Si elle porte de l’information, elle n’est pas au bon endroit : elle appartient au contenu, pas à la présentation.

Au clavier

Une image n’est pas interactive : elle n’entre dans l’ordre de tabulation que lorsqu’elle est dans un lien ou un bouton. Sa navigation appartient au lecteur d’écran.

Touche	Effet
G	Va à l’image suivante (mode navigation rapide, NVDA et JAWS). Les images décoratives n’y figurent pas — c’est le but.
Tab	Ne s’arrête que sur les images contenues dans un lien ou un bouton.
Entrée	Active le lien-image ou le bouton image qui a le focus.

Ce que le lecteur d’écran restitue

Sur une image informative : l’alternative, puis la nature — « Le taux moyen de conformité passe de 38 % en 2023 à 61 % en 2025, image ». Sur un lien-image : « Le rapport d’audit 2025, PDF, 1,2 Mo, lien ». Sur une image décorative : rien du tout, et c’est le résultat attendu. La formulation varie d’un lecteur à l’autre, les informations non.

Le diagnostic inverse se fait en trois écoutes. Si vous entendez un nom de fichier, l’attribut alt est absent. Si vous entendez « image » sans plus, l’alternative est vide alors que l’image porte de l’information. Et si vous entendez « graphique en barres, image », l’alternative décrit au lieu de transmettre — le défaut qu’aucun outil automatique ne relèvera jamais.

Checklist

• Pour chaque image, poser la question : porte-t-elle de l’information ?
• Informative : une alternative qui transmet cette information, pas qui décrit l’image.
• Décorative : alt="", jamais d’alt absent, et pas de title à côté.
• Lien-image : l’alternative dit la destination, pas le dessin.
• Graphique ou schéma : une description détaillée en plus de l’alternative courte.
• Légende : <figure> avec role="figure" et un aria-label identique au <figcaption>.
• Texte en image : du texte stylé chaque fois que c’est possible.

Les critères RGAA en jeu

• Critère 1.1 — Alternative textuelle des images

  Une image porteuse d'information sans alternative ne laisse au lecteur d'écran que le nom du fichier — quand il en annonce un. C'est le manque le plus répandu et le plus facile à relever d'un audit.

• Critère 1.2 — Images décoratives ignorées

  Une image de décoration doit être activement ignorée. Sans attribut alt, elle ne l'est pas : elle reste dans la restitution, et une icône répétée cent fois y est annoncée cent fois.

• Critère 1.3 — Pertinence de l’alternative textuelle

  Avoir une alternative ne suffit pas, elle doit être pertinente. « Graphique en barres » décrit l'image sans transmettre ce qu'elle dit : le contenu est présent à l'écran, absent à l'oreille.

• Critère 1.6 — Description détaillée des images

  Un graphique, un schéma ou une carte ne tiennent pas dans une alternative courte : il leur faut en plus une description détaillée, atteignable depuis l'image.

• Critère 1.7 — Pertinence de la description détaillée

  Une description détaillée qui raconte l'apparence du graphique — deux axes, des barres colorées — n'en livre pas les données. C'est le défaut de l'alternative, répété à une autre échelle.

• Critère 1.8 — Remplacement des images texte

  Un texte mis en image ne se met pas à l'échelle sans flou, ne suit pas les réglages de contraste et ne se sélectionne pas. Le référentiel demande de le remplacer par du texte stylé quand c'est possible.

• Critère 1.9 — Légende reliée à son image

  C'est le critère où l'on s'arrête trop tôt : le test 1.9.1 demande quatre conditions cumulatives, et une figure qui n'a que figure et figcaption en remplit deux. Le role="figure" et l'aria-label recopiant la légende manquent presque toujours.

Vérifiez votre composant avec l'extension

Pour aller plus loin

• Critère 1.1 — Alternative textuelle des images et 1.3 — Pertinence de l’alternative textuelle : la paire que tout audit passe en premier, avec leurs tests balise par balise.
• Critère 6.1 — Liens explicites : ce sur quoi se juge l’alternative d’un lien-image.
• Les tableaux de données : le meilleur support de description détaillée pour un graphique.
• « Image porteuse d’information » et « Image de décoration » au glossaire : les deux définitions dont dépend toute cette fiche.

Sources

• W3C WAI — Images Tutorial — le guide de référence, cas par cas
• W3C WAI — An alt Decision Tree — l’arbre de décision, de la question au code
• MDN — <img> — l’élément et son attribut alt
• WCAG — Understanding 1.1.1 Non-text Content — l’exigence d’origine, et ses exceptions