Skip to content
design system
Thème d’affichage, actuellement Auto

molecule · stable · extension · since 2026-09

Question

Purpose

The question a wizard asks about one element, with the criterion it settles. The number comes first, as the auditor reads the grid, then the sentence; a help line says what to look at.

When to use, when not

Use it for every question a wizard asks. Not for a finding the tool wrote itself (that is AutoVerdict), not for a heading.

Anatomy

  1. The criterion’s number, a badge with a hidden “Critère” before it; several when one answer settles two.
  2. The question, one sentence.
  3. The help line, optional.

Props

Props of Question
NameTypeDefaultWhat it does
criterionstring | string[]The criterion the answer settles: "2.2". Several when one answer settles two.
id?stringAn id, so the answer buttons can be named by the question.
class?string''Layout classes only.
childrenSnippetThe question, one sentence ending with a question mark.
help?SnippetOne line under the question: what to look at.

States

One criterion, two criteria settled by one answer, and with a help line.

single

Light

Critère 2.2 Ce titre décrit-il bien le contenu du cadre ?

Dark

Critère 2.2 Ce titre décrit-il bien le contenu du cadre ?

320 px, light

Critère 2.2 Ce titre décrit-il bien le contenu du cadre ?

320 px, dark

Critère 2.2 Ce titre décrit-il bien le contenu du cadre ?

216 px, light

Critère 2.2 Ce titre décrit-il bien le contenu du cadre ?

Forced colours, captured
Question, story single, as Chromium renders it with forced colours active

twoCriteria

One answer settles two criteria: "is the image decorative?" settles 1.1 and 1.2 at once.

Light

Critère 1.1Critère 1.2 Cette image est-elle décorative ?

Dark

Critère 1.1Critère 1.2 Cette image est-elle décorative ?

320 px, light

Critère 1.1Critère 1.2 Cette image est-elle décorative ?

320 px, dark

Critère 1.1Critère 1.2 Cette image est-elle décorative ?

216 px, light

Critère 1.1Critère 1.2 Cette image est-elle décorative ?

Forced colours, captured
Question, story twoCriteria, as Chromium renders it with forced colours active

withHelp

The help line says what to look at, in one sentence.

Light

Critère 6.1 Chaque lien est-il explicite ?

Lisez l'intitulé seul, sans le paragraphe autour : dit-il où le lien mène ?

Dark

Critère 6.1 Chaque lien est-il explicite ?

Lisez l'intitulé seul, sans le paragraphe autour : dit-il où le lien mène ?

320 px, light

Critère 6.1 Chaque lien est-il explicite ?

Lisez l'intitulé seul, sans le paragraphe autour : dit-il où le lien mène ?

320 px, dark

Critère 6.1 Chaque lien est-il explicite ?

Lisez l'intitulé seul, sans le paragraphe autour : dit-il où le lien mène ?

216 px, light

Critère 6.1 Chaque lien est-il explicite ?

Lisez l'intitulé seul, sans le paragraphe autour : dit-il où le lien mène ?

Forced colours, captured
Question, story withHelp, as Chromium renders it with forced colours active

Accessibility contract

  • Role and name: a paragraph; its id names the answer buttons that follow it, through aria-labelledby on their group.
  • Keyboard, focus: none, it is text.
  • Live regions: none.

Content rules

French. The question ends with a question mark and can be answered by oui or non; it names what is judged (“ce titre”, “cette image”) rather than “l’élément”. The help line is one sentence, without a verb of obligation.

Do and don’t

  • Do give the question an id and name the answer group by it.
  • Do not put the criterion’s full text in the question; it is a disclosure the wizard adds under it.

Examples

<Question criterion="2.2" id="q-2-2">Ce titre décrit-il bien le contenu du cadre ?</Question>

Surfaces

  • Extension: every wizard question.

Related

WizardFrame, AnswerButtons, GlossaryTerm.

Decisions

  • 2026-09-26: the number before the sentence, and a hidden word before the number: the old badge read “2.2” alone, and a reader said it as a decimal.

Criteria held by construction

  • 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
    The criterion is said by its number and a hidden word, never by the badge's line alone; the question is the text, not a colour.
  • 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 sentence wraps and the badge sits inline, so the question reads at 216 pixels, the width of Firefox's sidebar.

Tokens it reads

  • Colour: --rl-ink, --rl-ink-soft, --rl-line-strong
  • Typography: --rl-font-mono, --rl-weight-bold, --rl-weight-regular, --rl-text-base, --rl-text-sm, --rl-text-xs
  • Spacing: --rl-space-1, --rl-space-1-5, --rl-space-2
  • Layout: --rl-radius, --rl-border