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

Pattern · extension

Wizard step

One screen of an audit wizard in the side panel: the frame names the theme, the header counts, the body asks one question per element and takes the answer, the note and the derogation, the footer moves on; and a page reopened says what it kept.

The pattern, live

Audit des images

Élément 2 / 4

Reprise : 2 réponses reprises, 1 élément à revérifier.

Les réponses des éléments disparus comptent toujours : une fenêtre fermée n’enlève rien à la page.

  • Critère 1.1, non testé
  • Critère 1.2, non testé
  • Critère 1.3, non applicable

2. Photo du produit

À revérifier, la page a changé depuis votre réponse

  • L’attribut alt est passé de « Sac à dos 30 L, vue de face » à une chaîne vide.

Votre réponse(1.1 conforme) est affichée mais ne compte pas tant que vous ne l’avez pas confirmée : le critère ne peut pas conclure « conforme » sur un élément qui n’est plus le même.

Critère 1.1 Cette a-t-elle une alternative textuelle ?

Regardez l’image dans la page, puis lisez son attribut alt ou le texte qui la remplace.

Ce que vous avez constaté ; repris dans le rapport.

  • 1 Conforme
  • 0 Non conforme
  • 0 Non applicable
  • 3 Non testé

How it works

  1. The frame is a region named by its title, a level-2 heading with tabindex="-1"; the progress says the element's rank over the total, and the close button is labelled. The body scrolls, not the frame, so the header and the footer stay in sight.
  2. A page reopened puts the resume banner first: one sentence, an alert drawing when something needs the auditor. The jump list follows, closed, so it never buries the question; open, one button per element carries its rank, its label and its status. The recap shows the theme's criteria with the current one said by aria-current.
  3. The element's heading takes the focus at each move, so a reader lands on what is judged before the question. The move is announced in a status region outside the frame.
  4. An answer given to an element that changed since is shown but does not count until confirmed; the flag says what changed and the button names the element and the answer.
  5. A verdict the tool concluded itself says the status, who said it, the page's markup here, and what it saw; the selector stays in the button, and the last line says the verdict is the auditor's to confirm.
  6. The question names its criterion, one sentence ending with a question mark; a term of the referential is a button with its definition under the sentence, never a tooltip. The answers are a group named by the question, the retained one filled and said by aria-pressed, the key written on the button.
  7. The note is optional and says so in its label. The derogation is a disclosure closed by default, which asks the nature first and refuses a justification left empty; posed, it shows the justification and the button that takes it back.
  8. The footer carries the counters on the left and the navigation on the right; on the last element the forward button finishes, and it refuses with a reason while an element has no answer.
  9. The letters and arrows are the frame's shortcuts, O, N, ←, → and Entrée: nothing fires while a field has the focus, and the jump list and the derogation mark themselves out with data-raccourcis="off", so an arrow inside them stays an arrow.

Rules a wizard that copies it keeps

  • One question per screen, and the criterion written on it; two criteria on one answer are two codes on the same question, never a second question hidden under the first.
  • The status is never the colour alone: the answer button carries its word, the counters their word, the recap's pills their icon and a hidden word.
  • An answer is recorded where it is given and announced; the screen does not move on by itself. The auditor moves with the footer or the arrows, and the focus follows to the element's heading.
  • A criterion is never derogated, only a content is: the derogation block belongs to the element, and its nature decides whether the content leaves the count.
  • A finish that refuses says why, next to the button; the counters say the same thing in figures.
  • Anything shown in the page while the wizard runs, a highlight, an overlay, is drawn on a host carrying rl-scope and the panel's theme, never on the page's root.

Built with