HTML fournit une méthode simple pour ajouter des figures et leurs légendes.
| Prérequis : | Vous devriez au préalable savoir comment créer un document HTML simple. |
|---|---|
| Objectifs : | Apprendre comment ajouter des figures à une page web, accompagnées de leurs légendes. |
Qu'est-ce qu'une figure ?
Une figure est une unité de contenu indépendante :
- qui exprime un message de façon claire et concise
- qui pourrait être placée à différents endroits dans la structure linéaire de la page
- qui fournit des informations essentielles pour appuyer le sens du texte principal
Si vous pensez qu'une légende doit être ajoutée à un contenu, c'est qu'il s'agit probablement d'une figure. Voici quelques exemples : des images, des fragments de code, des éléments audio ou vidéo, des équations, des tableaux, des diagrammes.
Pour symboliser des figures, HTML fournit l'élément <figure> :
<figure> <img alt="MDN" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"> </figure>
Ajouter une légende
Pour ajouter une légende, il suffit de la placer dans un élément <figcaption>, lui-même placé au sein de l'élément <figure> à côté d'une des deux balises <figure> :
<figure> <img alt="" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"> <figcaption>Le logo de MDN en 2014</figcaption> </figure>
<figcaption> indique au navigateur et aux technologies d'assistance (telles que les lecteurs d'écran) que la légende décrit le contenu de l'élément <figure>.
Du point de vue de l'accessibilité, les légendes et les textes de l'attribut alt ont deux rôles différents. Les légendes peuvent être utilisées par l'ensemble des visiteurs, qu'ils voient l'image ou non alors que le texte alt n'est utilisé que lorsque l'image est absente.
Pour cette raison, une légende et le texte alt ne devraient pas être identiques car les deux textes apparaissent lorsque l'image n'apparaît pas. Vous pouvez tester ce point en désactivant les images dans votre navigateur.