Il y a une confusion récurrente entre l’alt et la <figcaption>. Les deux décrivent une image, donc on pourrait penser qu’ils font la même chose. Ce n’est pas le cas. Ils répondent à deux questions différentes, pour deux audiences différentes, avec deux fonctions différentes.
L’alt remplace l’image. La légende la commente.
L’alt, remplacer l’image
L’alt transmet le contenu informatif d’une image aux utilisateurs qui ne peuvent pas la voir. Il répond à la question : si je retire cette image, quelle information disparaît ? C’est cette information qu’il faut mettre dans l’alt.
<img src="tacle-football.jpg"
alt="Deux footballeurs qui se disputent le ballon en l'air ; le joueur en noir et blanc a atteint le ballon de la tête avant celui en bleu clair">L’utilisateur de lecteur d’écran qui entend cette description reçoit exactement la même information que celui qui voit la photo. L’image est remplacée par son équivalent textuel.
La <figcaption>, commenter l’image
La <figcaption> explique le rôle de l’image dans son contexte. Elle ne décrit pas ce qu’on voit, elle dit pourquoi cette image est là, ce qu’elle illustre dans le propos.
<figure>
<img src="tacle-football.jpg"
alt="Deux footballeurs qui se disputent le ballon en l'air ; le joueur en noir et blanc a atteint le ballon de la tête avant celui en bleu clair">
<figcaption>
Martin Dupont (Cholet) a tenu Paul Masson (Nimes) à l'écart pendant la majeure partie du match.
</figcaption>
</figure>La <figcaption> dit quelque chose que l’alt ne dit pas, les noms des joueurs, les clubs, la signification tactique de ce moment dans le match. Ce n’est pas une répétition mais plutôt un complément.
La règle fondamentale : alt et <figcaption> ne doivent jamais être identiques. Si les deux disent la même chose, l’un des deux est redondant.
Quand utiliser <figure>
<figure> n’est pas obligatoire pour toutes les images. Une image avec un bon alt dans le bon contexte n’a pas besoin de <figure> ni de <figcaption>.
<figure> est utile quand :
- L’image ne se comprend pas complètement sans une légende qui la relie à son contexte
- Plusieurs images illustrent le même propos et doivent être groupées
- On veut numéroter une figure pour y faire référence ailleurs
- Un SVG inline ou un autre contenu non textuel nécessite une légende visible
Sans <figure> : suffisant si le contexte est clair :
<!-- Article intitulé "Portrait de Marie Dupont, adjointe à la culture", l'alt minimal est insuffisant si l'image est éditoriale -->
<img src="marie-dupont.jpg"
alt="Marie Dupont souriante, assise à son bureau de la mairie, entourée d'affiches d'expositions culturelles">
<!-- L'alt minimal reste valide uniquement si l'image est un portrait strictement identificatoire sans contenu éditorial. Exemple : sur une page "Notre équipe" où 12 portraits sont listés avec nom et fonction -->
<img src="marie-dupont.jpg" alt="Marie Dupont">Cas particulier avec la photo de personne : quand une photo est un portrait identificatoire (trombinoscope, liste d’élus) et que le nom est déjà dans la <figcaption> ou le texte adjacent, l’alt peut se limiter au nom.
En revanche, dans un article de portrait ou un reportage, l’image est éditoriale : elle transmet l’ambiance, la posture, l’environnement. L’alt doit alors décrire ce que la photo montre, pas seulement qui elle montre.
Avec <figure> : nécessaire si le contexte ne suffit pas :
<!-- Trombinoscope — identité dans la figcaption, alt minimal -->
<figure>
<img src="marie-dupont.jpg" alt="Marie Dupont">
<figcaption>Marie Dupont, adjointe à la culture et au patrimoine</figcaption>
</figure>
<!-- Article de portrait — image éditoriale, alt descriptif -->
<figure>
<img src="marie-dupont.jpg"
alt="Marie Dupont souriante, assise à son bureau, entourée d'affiches d'expositions">
<figcaption>Adjointe à la culture depuis 2020, Marie Dupont porte plusieurs projets patrimoniaux ambitieux.</figcaption>
</figure>Sans la <figcaption>, le lecteur arrivant sur cette image au milieu d’une liste de portraits ne sait pas qui est cette personne. L’alt décrit ce qu’on voit ; la légende dit qui c’est et quel est son rôle.
Les quatre cas d’usage
Cas 1 : Une image qui a besoin de contexte
La situation la plus courante. Une photo illustre un article ou une actualité, mais la photo seule ne suffit pas, on a besoin de savoir qui, où, quand.
<figure>
<img src="foire-moules-2024.jpg"
alt="Vue de la place du port de Nom_ville avec des stands colorés et une foule dense sous un ciel nuageux">
<figcaption>
La 32e édition de la Foire aux moules a réuni plus de 3 000 visiteurs le 15 septembre 2024.
</figcaption>
</figure>L’alt décrit la scène visuelle. La <figcaption> donne les informations factuelles que l’image seule ne peut pas transmettre : le numéro d’édition, le nombre de visiteurs, la date exacte.
Cas 2 : Plusieurs images illustrant le même propos
Quand plusieurs captures d’écran ou photos montrent des variations du même problème ou du même sujet, <figure> peut les regrouper sous une légende commune.
<figure>
<img src="focus-lien.png"
alt="Un lien de navigation avec le focus clavier actif mais sans indicateur visuel visible">
<img src="focus-bouton.png"
alt="Un bouton avec le focus clavier actif mais sans indicateur visuel visible">
<img src="focus-champ.png"
alt="Un champ de formulaire avec le focus clavier actif mais sans indicateur visuel visible">
<figcaption>
Trois composants différents présentant le même problème : l'indicateur de focus clavier est absent sur l'ensemble du site.
</figcaption>
</figure>Chaque image a son propre alt qui décrit précisément ce qu’elle montre. La <figcaption> commune explique pourquoi ces trois captures sont montrées ensemble.
Cas 3 : Référence numérotée
Dans un rapport ou une documentation, une image peut être numérotée pour être citée à plusieurs endroits du texte.
<figure>
<img src="plan-evacuation.png"
alt="Plan du rez-de-chaussée de la mairie avec les issues de secours indiquées en vert et les zones de rassemblement en orange">
<figcaption>
Figure 1 : Plan d'évacuation du rez-de-chaussée de la mairie.
</figcaption>
</figure>
<!-- Plus loin dans le texte -->
<p>
En cas d'alarme, se diriger vers la sortie la plus proche indiquée sur le plan (voir Figure 1) et rejoindre
le point de rassemblement dans la cour.
</p>Cas 4 : SVG inline complexe
Pour les graphiques ou diagrammes SVG embarqués directement dans le HTML, <figure> + <figcaption> + <title> interne forment la structure recommandée.
<figure>
<svg role="img" aria-labelledby="titre-graphique" focusable="false">
<title id="titre-graphique">
Fréquentation de la médiathèque 2020-2024 : hausse continue de 12 000 à 18 500 visites annuelles, avec un creux en 2021 dû à la fermeture Covid.
</title>
<!-- paths du graphique -->
</svg>
<figcaption>
La fréquentation de la médiathèque progresse régulièrement depuis la réouverture post-Covid.
</figcaption>
</figure>Le <title> interne au SVG est l’équivalent de l’alt, il remplace le graphique pour les technologies d’assistance (AT). La <figcaption> commente la tendance pour tous les lecteurs.
Les erreurs fréquentes
alt et <figcaption> identiques
<!-- ✗ Double annonce inutile, l'alt et la légende disent la même chose -->
<figure>
<img src="mairie.jpg"
alt="La mairie de Nom_ville, bâtiment en pierre avec un drapeau français">
<figcaption>
La mairie de Nom_ville, bâtiment en pierre avec un drapeau français
</figcaption>
</figure>
<!-- ✓ L'alt décrit, la figcaption contextualise -->
<figure>
<img src="mairie.jpg"
alt="Bâtiment en pierre de taille à deux étages avec un drapeau français sur la façade et un perron à colonnes">
<figcaption>
La mairie de Nom_ville, construite en 1887, classée au patrimoine local.
</figcaption>
</figure>Quand alt et <figcaption> sont identiques, l’utilisateur de lecteur d’écran entend la même information deux fois, la <figcaption> étant du texte visible, elle est lue comme n’importe quel autre texte de la page.
<figcaption> comme seul label, sans alt
<!-- ✗ L'alt est absent — la figcaption ne le remplace pas -->
<figure>
<img src="conseil-mars-2025.jpg">
<figcaption>Séance du conseil municipal en mars 2025</figcaption>
</figure>La <figcaption> est visible dans la page mais ne remplace pas l’alt. Si l’image ne charge pas ou si l’utilisateur ne voit pas les images, l’information est perdue. NVDA annoncera le nom du fichier (conseil-mars-2025.jpg) faute d’alt.
<!-- ✓ Les deux sont présents et complémentaires -->
<figure>
<img src="conseil-mars-2025.jpg"
alt="15 conseillers municipaux réunis autour d'une grande table en U dans la salle du conseil">
<figcaption>Séance du conseil municipal du 15 mars 2025</figcaption>
</figure>aria-labelledby pointant vers la <figcaption>
Une erreur ARIA parfois rencontrée : utiliser aria-labelledby sur l’image pour pointer vers la <figcaption>, pensant que ça remplace l’alt.
<!-- ✗ La figcaption n'est pas l'alt — elle ne le remplace pas -->
<figure>
<img src="budget.png" aria-labelledby="legende-budget">
<figcaption id="legende-budget">Budget primitif 2025</figcaption>
</figure>Le problème : “Budget primitif 2025” est le titre du graphique, pas une description de son contenu. NVDA annonce “Budget primitif 2025, graphique”, l’utilisateur sait que c’est un graphique du budget 2025, mais ne connaît pas les données qu’il contient.
<!-- ✓ alt pour les données, figcaption pour le contexte -->
<figure>
<img src="budget.png"
alt="Répartition du budget 2025 : voirie 40 %, action sociale 30 %, culture 20 %, administration 10 %">
<figcaption>Budget primitif 2025 voté en conseil municipal le 20 janvier</figcaption>
</figure>Ce que le RGAA exige
Critère 1.1 : Chaque image porteuse d’information a-t-elle une alternative textuelle ?
La <figcaption> visible ne dispense pas de l’alt. Les deux sont complémentaires, pas interchangeables.
Critère 1.3 : L’alternative textuelle est-elle pertinente ?
L’alt doit transmettre l’information de l’image, pas répéter la légende. Si alt et <figcaption> disent la même chose, l’alt n’est pas pertinent au sens du critère.
Critère 1.6 : Chaque image porteuse d’information ayant une description détaillée dispose-t-elle d’une alternative textuelle courte ?
Pour les images complexes (graphiques, cartes, infographies) dont la description complète ne peut pas tenir dans l’alt, la <figcaption> ou un texte adjacent peut accueillir cette description longue. L’alt reste court et pointe vers la description.
<figure>
<img src="carte-transports.png"
alt="Carte des lignes de transport en commun de Nom_ville Métropole, description détaillée ci-dessous">
<figcaption>
Réseau de transport Bibus au 1er janvier 2025 : 4 lignes de tram, 28 lignes de bus, 6 lignes express.
<!-- description complète avec tous les arrêts si nécessaire -->
</figcaption>
</figure>