Figure

À quoi il sert

Figure associe un média à sa légende par les éléments figure et figcaption, avec un crédit facultatif.

Quand l’utiliser

• Légender une image qui apporte une information, avec figcaption relié au média.
• Donner la source d’une image avec credit, affiché en petit après la légende.

Quand ne pas l’utiliser

• Pour une image sans légende : utiliser Photo seul, Figure refuse une légende vide.
• Pour décrire l’image : la légende ne remplace pas l’alt de Photo.

Exemples

<Figure caption="Rectangle bleu clair au-dessus d’une bande grise." credit="Image : générée">
  <Photo src={photo} alt="Rectangle bleu clair au-dessus d’une bande grise" ratio="landscape" />
</Figure>

Accessibilité

Clavier

• Figure et figcaption ne sont pas interactifs : ils ne prennent pas le focus.

Lecteur d’écran

• La légende est liée au média par l’élément figcaption, dans le même figure.
• Le crédit est un élément small, lu à la suite de la légende.

Garanti par le composant

• Éléments figure, figcaption et small, sans texte en dur ; zéro JavaScript.
• Légende vide refusée au rendu (test Figure.test.ts).

À la charge de l’intégrateur

• Écrire un alt utile dans Photo : la légende ne le remplace pas.
• Choisir decorative sur Photo seulement si la légende porte déjà le sens de l’image.

Propriétés

Jetons utilisés

• --pp-color-muted
• --pp-font-size--1
• --pp-size-measure
• --pp-space-2xs

Preuves et décisions

• Élément figure, spécification HTML (WHATWG)
• WCAG 1.1.1 Contenu non textuel (A)
• Tests : packages/astro/test/Figure.test.ts