Caption (Légende)
La légende est un texte court accompagnant une image (sous celle-ci). Elle peut-être descriptive, interprétative, informative.
Usage
La légende sert à éviter différentes interprétations, à situer. Elle donne le message essentiel et quelquefois le contexte.
Ce texte joue un rôle :
- de redondance : la photographie donne les informations
- d’ancrage : la photographie atteste les faits rapportés dans la légende
- de relais : la photographie précise et complète les faits rapportés.
Le composant légende concerne à la fois les images (avec <figcaption>) et les tableaux (avec <caption>). Dans le cas de la légende d’image, elle peut être utilisée dans une visionneuse qui permet un « zoom » sur l’image et éventuellement de voir une galerie en carrousel.
Bonnes pratiques
La légende de l’image correspond au texte affiché sous l’image. Elle n’apporte pas de plus-value directe en terme de référencement naturel. Cependant, elle est importante pour l’expérience utilisateur et apporte du contenu autour de l’image grâce à des mots clés.
Elle doit apporter les éléments d’information indispensables à la compréhension de l’image quelle qu’elle soit et il est donc nécessaire de répondre aux questions suivantes :
- De qui ?
- De quoi s’agit-il ?
- Où est-ce ?
Seule, la photo étroitement associée graphiquement à un titre peut – éventuellement – se passer de légende, le titre en prenant la fonction.
Style & code
Dépendances :
- Classe
sipauisur un parent (par exemple le<body>).
Standard
Il n’y a pas besoin de classe spécifique, les balises HTML <figcaption> et <caption> sont automatiquement designées comme attendu.
figcaption
<figcaption>« Inspecteur Derrick » et « Rex, chien flic » sont deux séries allemandes extrêmement populaires à la télévision française. | <span class="su-credit">ZDF / Sat. 1</span></figcaption>
caption
<table class="su-data-table su-fullwidth">
<caption>Tableau des résultats par circonscriptions</caption>
</table>
Exemple avec une image
Pour ajouter une légende à une image, il faut mettre le <figcaption> à la racine de <figure>, sous l’image. Ici, l’image est dans un <div> pour gérer son ratio (cf. le composant Picture (image)).
N. B. – Lorsqu’une image est accompagnée d’une légende, l’attribut alt de cette dernière est inutile du point de vue de l’accessibilité. Il est toutefois obligatoire pour la validité du HTML ; on le laisse donc vide dans ce cas-là…
<figure>
<div class="su-ratio-16-7">
<img class="su-media" alt=""
srcset="https://media.ouest-france.fr/v1/pictures/MjAyMjAzM2VkNjY3YjQ1MzdiZTVkYmIzMTk4YWU1ODI1ZjQ5NmE?width=320&height=180&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=fa68fbe4a635e88a98ee6924e853a296d3a57caa45871c649e0ac03b3c902992 320w, https://media.ouest-france.fr/v1/pictures/MjAyMjAzM2VkNjY3YjQ1MzdiZTVkYmIzMTk4YWU1ODI1ZjQ5NmE?width=375&height=210&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=b606e4b6b255b0cfd991c893a4c2078a8a68bb6ee896083a9045f15dd109b17c 360w, https://media.ouest-france.fr/v1/pictures/MjAyMjAzM2VkNjY3YjQ1MzdiZTVkYmIzMTk4YWU1ODI1ZjQ5NmE?width=480&height=270&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=396552a6e1f36e58cce11c057b608c4bc8bbe786c2dfeb7d64d4dcd9331479c1 480w, https://media.ouest-france.fr/v1/pictures/MjAyMjAzM2VkNjY3YjQ1MzdiZTVkYmIzMTk4YWU1ODI1ZjQ5NmE?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=cb5d14ece9cf9b9a9f3b7fe49c35a7e032436ebfad68a93a1a48f9557aeebf63 630w, https://media.ouest-france.fr/v1/pictures/MjAyMjAzM2VkNjY3YjQ1MzdiZTVkYmIzMTk4YWU1ODI1ZjQ5NmE?width=940&height=528&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=b26ab2aef88b10444330ecf9483722706ed6575717aabe4f8383017b30c134fb, https://media.ouest-france.fr/v1/pictures/MjAyMjAzM2VkNjY3YjQ1MzdiZTVkYmIzMTk4YWU1ODI1ZjQ5NmE?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=a74b6db8d51a4f77e7786537681966fbcbfec75f807d7b09933e3850bcee4684"
sizes="(max-width: 767px) and (min-resolution: 2dppx) and (max-resolution: 2.9dppx) 50vw,
(max-width: 767px) and (min-resolution: 3dppx) and (max-resolution: 3.9dppx) 33.3vw,
(max-width: 767px) and (min-resolution: 4dppx) 25vw,
(max-width: 767px) 100vw,
(min-width: 768px) and (max-width: 979px) 630px,
(min-width: 980px) and (max-width: 1279px) 940px,
1260px">
</div>
<figcaption>« Inspecteur Derrick » et « Rex, chien flic » sont deux séries allemandes extrêmement populaires à la télévision française. | <span class="su-credit">ZDF / Sat. 1</span></figcaption>
</figure>
Dans une visionneuse
Dans une visionneuse, la couleur de fond change, il faut donc adapter la couleur du texte de la légende. Cette adaptation se fait automatiquement s’il y a une classe su-viewer sur un parent.
<div class="su-viewer" style="background: DimGray; padding: 10px">
<figcaption>« Inspecteur Derrick » et « Rex, chien flic » sont deux séries allemandes extrêmement populaires à la télévision française. | <span class="su-credit">ZDF / Sat. 1</span></figcaption>
</div>
Liste des classes disponibles
su-credit
Classes annexes
su-viewer