Figure et figcaption

Conception avec des éléments figure et figcaption

L’élément HTML <figure> peut regrouper un éventail de contenu, y compris des images, des illustrations, des diagrammes, des tableaux et des graphiques. Il peut aussi contenir des vidéos, des citations, des poèmes et des bribes de code. Il peut s’accompagner d’un élément <figcaption> facultatif.

L’élément <figcaption> représente une légende visible pour la figure. Il est facultatif et n’est pas obligatoire pour tous les éléments <figure>.

Bien que l’attribut alt et l’élément <figcaption> constituent des moyens de décrire des images, les objectifs visés sont différents.

  • Le texte de remplacement communique la signification ou le contenu essentiel de l’image dans une courte phrase.
  • La légende fournit un contexte pour décrire l’information qui n’est pas apparente en regardant l’image. Cela comprend les qui, quoi, quand, où et/ou pourquoi d’une image.

Pratiques exemplaires relativement à l’utilisation de texte de remplacement et de l’élément <figcaption> :

  • N’utilisez pas exactement les mêmes mots pour le texte de remplacement et l’élément <figcaption>. Les logiciels de lecture à l’écran traiteront l’information deux fois.
  • Fournissez toujours un texte de remplacement pour les images même si elles ont un élément <figcaption>. Si vous fournissez un attribut alt vide ou nul (alt=""), les logiciels de lecture à l’écran ne seront pas en mesure d’annoncer la présence d’une image.

Bon exemple : Figure et figcaption

Maisons trullo (cabanes en pierre sèche) avec toit conique
Rangée de maisons trullo (cabanes en pierre sèche) sur la rue Monte Pertica à Alberobello, dans la province de Bari, en Italie

HTML

<figure>
   <img clas="img-responsive" alt="Maisons trullo (cabanes en pierre sèche) avec toit conique" src="images/image4.jpg"/>
   <figcaption>Rangée de maisons trullo (cabanes en pierre sèche) sur la rue Monte Pertica à Alberobello, dans la province de Bari, en Italie</figcaption>
</figure>
Haut de la page