Figure

Purpose

A picture with its caption. In the product it is evidence: the element found non-compliant, photographed by the extension at the time of the audit, with the selector under it.

When to use, when not

Use it for a picture that proves or shows something the text cannot: a screenshot of an element, a diagram. Not for decoration, which the direction refuses, and not for the mark, which is Logo.

Anatomy

1. The picture, with its intrinsic size, lazy.
2. A link around it when it opens large, named for it.
3. The caption, plain or in the mono face.

Props

Props of Figure

Name	Type	Default	What it does
src	string		The picture's address.
alt	string		What the picture shows and proves, as a sentence.
width?	number		The intrinsic size, so the page reserves the room before the picture arrives.
height?	number		The intrinsic size.
href?	string		The address of the picture at full size, opened in a new window; the picture becomes the link.
caption?	string		The caption under the picture: the selector, the source.
code?	boolean	false	The caption is a value in the mono face: a selector.
size?	'full' | 'natural'	'full'	`natural` keeps the picture at its size up to the frame; `full` stretches it to the frame's width.

States

Evidence with its selector, a picture that opens large, and a picture at its natural size.

evidence

The proof of a non-conformity: the alt names the element and the criterion, the caption is the selector.

Light

Dark

320 px, light

320 px, dark

216 px, light

Forced colours, captured

natural

A picture kept at its size, up to the frame.

Light

Dark

320 px, light

320 px, dark

216 px, light

Forced colours, captured

opensLarge

The picture is the link to itself at full size, and its name says so.

Light

Dark

320 px, light

320 px, dark

216 px, light

Forced colours, captured

Accessibility contract

• Role and name: figure with a figcaption; the img has the alt given, extended with “(ouvrir en grand, nouvelle fenêtre)” when it is a link.
• Keyboard, focus: the link, when there is one, with the base layer’s ring.
• Live regions: none.

Content rules

French. The alt is a sentence that names the element and the criterion (“Élément footer .legal-links, en défaut sur le critère 3.2”). The caption is the selector, or the source of a diagram.

Do and don’t

• Do give the intrinsic width and height, so the page does not jump.
• Do write the alt as what the picture proves, not “capture d’écran”.
• Do not use it for a picture that says nothing the text does not: the direction forbids illustration.

Examples

<Figure src="/api/screenshots/42" alt="Élément footer .legal-links, en défaut sur le critère 3.2" width={640} height={200} href="/api/screenshots/42" caption="footer .legal-links" code />

Surfaces

• App: the screenshots of a non-conformity on the audited page and in the report.

Related

CodeBlock.

Decisions

• 2026-09-26: the whole picture is the link rather than a “voir en grand” link under it, since the picture is what one wants larger, and one target beats two.

Criteria held by construction

• 1.1, Chaque image porteuse d'information a-t-elle une alternative textuelle ?
  The picture carries an alt that says what it proves; the caption says where.
• 13.2, Dans chaque page web, l'ouverture d'une nouvelle fenêtre ne doit pas être déclenchée sans action de l'utilisateur. Cette règle est-elle respectée ?
  When the picture opens large in a new window, its name says so.
• 10.11, Pour chaque page web, les contenus peuvent-ils être présentés sans avoir recours à un défilement vertical pour une fenêtre ayant une hauteur de 256px ou à un défilement horizontal pour une fenêtre ayant une largeur de 320px ?
  The picture never exceeds its frame, and a caption that is a selector wraps anywhere.

Tokens it reads

• Colour: --rl-ink-soft, --rl-line-control, --rl-line-strong, --rl-surface
• Typography: --rl-font-mono, --rl-text-xs
• Spacing: --rl-space-1
• Layout: --rl-radius, --rl-border