Aller au contenu
SkillCodex
Menu

Stepper

Indicateur d’étapes

Un résumé d’avancement qui distingue les étapes terminées, courante et à venir d’un processus linéaire porteur de sens.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r1
Sources
5 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : montrer à quelle étape du formulaire je suisétape trois sur cinqmarquer les étapes précédentes comme terminées

Toutes les formulations
Enregistrer et partager

Reconnaître

S’orienter dans un parcours

Essayer

Faut-il situer la page dans une hiérarchie, parcourir des pages de résultats ou montrer l’étape d’un processus ?

Indicateur d’étapes

Contexte commun aux essais

Une personne doit comprendre où elle se trouve et quel déplacement est possible, sans confondre hiérarchie du site, pages de résultats et étapes d’un processus.

Indicateur d’étapes

Mission

Indicateur d’étapes

Utilise les actions séparées Suivant et Précédent, puis vérifie les états et le titre de l’écran après chaque changement.

  1. Détails terminée
  2. Documents actuelle
  3. Vérification à venir

2 / 3 — Documents

Les segments communiquent l’état ; les boutons séparés pilotent le parcours.

Résultat de l’essai

Étape 2 sur 3 : Documents.

Étape 1 sur 3

Essayer

Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.

Comportement et cas limite
À observer
Documents est l’étape actuelle, Détails est terminée et Vérification est à venir.
Cas limite
Revenir à une étape terminée préserve les données et recalcule les états sans rendre les segments décoratifs cliquables.

Ce que cet essai montre

L’indicateur d’étapes résume des étapes métier ordonnées ; la pagination parcourt des pages de contenu sœurs, tandis que la barre de progression mesure une quantité accomplie.

Lequel convient à ton besoin ?

Indicateur d’étapes

Un processus linéaire stable comporte au moins trois sections utiles

Fil d’Ariane

Les pages appartiennent à une hiérarchie de plusieurs niveaux

Quel composant utilises-tu ici ?
Différence et sources

L’indicateur d’étapes résume des étapes métier ordonnées ; la pagination parcourt des pages de contenu sœurs, tandis que la barre de progression mesure une quantité accomplie.

Consulter les sources

    Parties du spécimen

    Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

    Liste d’étapes

    Les étapes ordonnées qui définissent le processus complet.

    Position dans l’atlas

    Carte relationnelle

    Repère le chapitre, les concepts proches et la prochaine décision utile.

    • Chapitre

      S’orienter dans un parcours

      Indicateur d’étapes appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Fil d’Ariane

      Choisis Indicateur d’étapes si un processus linéaire a des étapes terminées, courante et à venir. Choisis Fil d’Ariane si les pages ont des parents et que l’utilisateur peut remonter d’un niveau.

      Comparer cette paire
    • Ne pas confondre

      Pagination

      Choisis Indicateur d’étapes si un processus linéaire comporte au moins trois étapes utiles que l’utilisateur accomplit dans l’ordre. Choisis Pagination si les pages sont des tranches équivalentes d’une collection et qu’aucune ne doit être terminée avant une autre.

      Comparer cette paire
    • Prochaine étape

      Compare les concepts du chapitre avant de retenir une implémentation.

      Ouvrir le chapitre

    Avec tes mots

    Comprendre

    Ce que les gens décrivent

    Alias documentés : stepper, progression par étapes, étapes de processus

    • montrer à quelle étape du formulaire je suis
    • étape trois sur cinq
    • marquer les étapes précédentes comme terminées
    • montrer les étapes avant l’envoi
    • suivre l’avancement d’un parcours de paiement
    • distinguer l’étape courante des étapes à venir

    Choisir

    À utiliser quand

    • Un processus linéaire stable comporte au moins trois sections utiles
    • Tu dois donner le contexte d’avancement entre plusieurs écrans

    À éviter quand

    • Les étapes peuvent se faire dans n’importe quel ordre ou changer selon les réponses
    • Le processus compte moins de trois sections utiles

    Comparer

    Comparer les concepts proches

    Checklist de vérification

    Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

    1. 1. À faire

      Lis l’étape actuelle, termine-la et utilise l’action Suivant séparée.

      Résultat attendu

      Pendant le parcours, une seule étape est actuelle ; les étapes terminées, actuelle et à venir se distinguent autrement que par la couleur.

    2. 2. À faire

      Utilise Retour, puis avance de nouveau ; si tes étapes contiennent une saisie, examine-la en revenant.

      Résultat attendu

      Les états des étapes restent cohérents avec le déroulement réel, et revenir à une étape de saisie conserve le brouillon.

    3. 3. À faire

      Suis le parcours avec seulement Tab, Entrée et les boutons Suivant et Retour.

      Résultat attendu

      Les indicateurs d’étape décoratifs n’ajoutent pas de fausses actions ; chaque changement rend la nouvelle étape claire par son titre ou une annonce.

    Contrat complet
    1. 1Une seule étape est actuelle
    2. 2L’état ne dépend jamais seulement de la couleur
    3. 3Les contrôles de navigation restent séparés
    4. 4L’écran possède un vrai titre
    5. 5Les nombres d’étape actuelle et total restent exacts

    Comprendre → Reconnaître → Choisir → Comparer

    Pack pour ton agent

    Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

    Implémenter correctement

    Construis Indicateur d’étapes sans casser son comportement

    # Implémenter Indicateur d’étapes dans ton agent
    
    ## Objectif
    Implémente Indicateur d’étapes pour ce comportement vérifié : Un résumé d’avancement qui distingue les étapes terminées, courante et à venir d’un processus linéaire porteur de sens.
    
    ## Prérequis
    - Inspecte d’abord le dépôt, le design system et les tests existants.
    - Préserve les changements sans rapport et borne les fichiers modifiés.
    - Confirme qu’Indicateur d’étapes répond au besoin avant de coder.
    
    ## Comportement requis
    - Le parcours marque les étapes précédentes comme terminées, une étape comme actuelle et les suivantes comme à venir.
    - L’activation au pointeur, avec Entrée ou Espace, exécute une action nommée une seule fois.
    
    ## États à couvrir
    - Détails actuels
    - Documents actuels
    - Vérification actuelle
    - Processus terminé
    
    ## Accessibilité
    - Rôle ARIA : ol > li[aria-current=true] + heading
    - Le contrôle principal ou la région nommée pour Indicateur d’étapes possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    - Après un changement d’étape sur place, focaliser le nouveau titre ou utiliser un équivalent documenté ; ne jamais focaliser un segment décoratif.
    - L’indicateur est un contexte persistant du parcours et ne se ferme pas.
    - Exposer Étape N sur M et le titre actuel, inclure les états terminé et à venir, et ne marquer que l’étape libellée actuelle.
    - L’indicateur n’ajoute aucun arrêt Tab par défaut
    - Les boutons séparés Précédent et Suivant utilisent Tab et Entrée ou Espace
    - Les segments décoratifs n’interceptent pas les touches
    
    ## Quand ne pas utiliser
    - Les étapes peuvent se faire dans n’importe quel ordre ou changer selon les réponses
    - Le processus compte moins de trois sections utiles
    
    ## Critères d’acceptation
    - Une seule étape est actuelle
    - L’état ne dépend jamais seulement de la couleur
    - Les contrôles de navigation restent séparés
    - L’écran possède un vrai titre
    - Les nombres d’étape actuelle et total restent exacts
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le besoin est relié au comportement canonique avant toute décision technique.
    • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
    • Les critères d’acceptation et le format de sortie rendent la vérification observable.

    À essayer ensuite

    Vérifie Indicateur d’étapes sur un parcours réel

    # Vérifier Indicateur d’étapes après l’implémentation
    
    ## Objectif
    Audite l’implémentation d’Indicateur d’étapes au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
    
    ## Contrôles
    - Rejoue le plus petit parcours représentatif.
    - Contrôle le clavier, le focus, le nom accessible et les annonces.
    - Relie chaque écart à un critère d’acceptation précis.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:3092098345fe2a83818fd49db6c1c0be462605173ee762eaf35029138602829e

    Diagnostiquer un problème

    Trouve et corrige le défaut d’Indicateur d’étapes

    # Déboguer Indicateur d’étapes dans ton agent
    
    ## Symptôme observé
    [DÉCRIS ICI LE SYMPTÔME]
    
    ## Contrôles observables
    - Reproduis le problème avec le plus petit parcours pertinent.
    - Compare le comportement aux états et transitions documentés d’Indicateur d’étapes.
    - Vérifie le clavier, le focus, le nom accessible et les annonces.
    
    ## Causes possibles
    - La primitive employée ne correspond pas au comportement attendu.
    - Un état, une transition ou un retour de focus manque.
    - Le composant voisin capture un événement ou masque un signal accessible.
    
    ## Corrections bornées
    - Corrige la cause reproduite sans recréer les composants voisins.
    - Conserve le contrat public et ajoute un test ciblé de non-régression.
    - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
    
    ## Vérification finale
    - Une seule étape est actuelle
    - L’état ne dépend jamais seulement de la couleur
    - Les contrôles de navigation restent séparés
    - L’écran possède un vrai titre
    - Les nombres d’étape actuelle et total restent exacts
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le symptôme explicite évite de partir d’une correction supposée.
    • Les contrôles séparent comportement, accessibilité et interférences voisines.
    • La correction reste bornée et doit produire une preuve de non-régression.

    À essayer ensuite

    Verrouille la correction d’Indicateur d’étapes

    # Empêcher la régression d’Indicateur d’étapes
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Indicateur d’étapes aux concepts voisins avant d’élargir la correction.
    
    ## Contrôles
    - Prouve que le test échoue avant la correction.
    - Prouve qu’il passe après la correction bornée.
    - Vérifie qu’aucun composant voisin n’a changé de comportement.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:57f20d5ab4e9ef932b3cbf959cadac00ec3030c4a8c45113133a3164eb8f4892

    Fiche complète, enregistrement et provenance

    Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

    Digest du Pack: sha256:fbc091f986dcd27879883b790c43c64e6ff4c06356e39b06dac3a352d04df2ee

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    ol with status text and optional a[href]

    NatifUne liste ordonnée communique l’état. Les étapes ne sont des contrôles que si le parcours permet réellement d’y naviguer.

    Détails techniques

    Comportements

    • Mettre à jour l’étape du processus

      Le parcours marque les étapes précédentes comme terminées, une étape comme actuelle et les suivantes comme à venir.

    • Exécuter une action

      L'activation au pointeur, avec Entrée ou Espace, exécute une action nommée une seule fois.

    États

    • Détails actuels

      Détails actuels

    • Documents actuels

      Documents actuels

    • Vérification actuelle

      Vérification actuelle

    • Processus terminé

      Processus terminé

    Transitions d’état

    • Détails actuels → Documents actuels

      Activer l’action séparée Suivant avance vers Documents.

    • Documents actuels → Vérification actuelle

      Activer l’action séparée Suivant avance vers Vérification.

    • Vérification actuelle → Documents actuels

      Activer l’action séparée Précédent revient à Documents.

    • Vérification actuelle → Processus terminé

      Activer Envoyer termine le processus et expose son achèvement.

    Scénarios de test

    Contexte
    Une demande de compte en trois étapes passe de Détails à Documents puis Vérification.
    Mission
    Utilise les actions séparées Suivant et Précédent, puis vérifie les états et le titre de l’écran après chaque changement.
    État principal
    Documents est l’étape actuelle, Détails est terminée et Vérification est à venir.
    Cas limite
    Revenir à une étape terminée préserve les données et recalcule les états sans rendre les segments décoratifs cliquables.

    Signaux visuels

    • Segments terminés, actuel et à venir dans l’ordre
    • Segment actuel le plus visible
    • Compteur d’étape associé au titre de l’écran

    Signaux comportementaux

    • L’indicateur reflète l’état du parcours
    • Des actions Précédent et Suivant séparées assurent la navigation
    • Les états passés et à venir se mettent à jour ensemble

    Accessibilité

    Rôle
    ol > li[aria-current=true] + heading
    Nom accessible
    Le contrôle principal ou la région nommée pour Indicateur d’étapes possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    Focus clavier
    Après un changement d’étape sur place, focaliser le nouveau titre ou utiliser un équivalent documenté ; ne jamais focaliser un segment décoratif.
    Fermeture
    L’indicateur est un contexte persistant du parcours et ne se ferme pas.
    Défilement
    La position actuelle reste visible si possible. Un changement de navigation ou d’étape mène vers un titre pertinent sans saut de défilement inattendu.
    Annonce
    Exposer Étape N sur M et le titre actuel, inclure les états terminé et à venir, et ne marquer que l’étape libellée actuelle.
    Clavier
    • L’indicateur n’ajoute aucun arrêt Tab par défaut
    • Les boutons séparés Précédent et Suivant utilisent Tab et Entrée ou Espace
    • Les segments décoratifs n’interceptent pas les touches

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • ol with status text and optional a[href]

      implementationKind
      custom
      nativeElement
      ol with status text and optional a[href]
      ariaPattern
      ordered process stages with aria-current=step or true
      radixPrimitive
      Non applicable
      shadcnRecipe
      Non applicable
      runtimeDependency
      Non applicable
      packageName
      Non applicable
      exportName
      Non applicable
      exactVersion
      Non applicable
      status
      exception
      sourceId
      source-ui-uswds-step-indicator
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Une liste ordonnée communique l’état. Les étapes ne sont des contrôles que si le parcours permet réellement d’y naviguer.

      Vérifier la source du binding

    Sources

    • U.S. Web Design System: Step indicator
      sourceId
      source-ui-uswds-step-indicator
      kind
      documentation
      canonicalUrl
      https://designsystem.digital.gov/components/step-indicator/
      publisher
      U.S. Web Design System
      sourceRevision
      http-etag:W/"ffdfcdbbb6e587a1528d85d8269a3434"
      consultedAt
      2026-08-10
      license
      Non indiquée
      contentDigest
      sha256:97e887de022a2aa2727694a055eb52754dcc35648a30df701697e873aff02344
      status
      verified

      Affirmation couverte : Indicateur d’étapes : parties, API d'état, interactions et limites d'implémentation documentées pour USWDS Step indicator.

    • WHATWG HTML: The ol element
      sourceId
      source-ui-html-ordered-list
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element
      publisher
      WHATWG
      sourceRevision
      http-etag:"6a5dd5e8-34d05"
      consultedAt
      2026-08-10
      license
      Non indiquée
      contentDigest
      sha256:4e0627672499c1cfdcd9525e54080baafee74ab80e97b8b446737bfe97d146a5
      status
      verified

      Affirmation couverte : Indicateur d’étapes : sémantique native normative, états, attributs et comportement du navigateur pour ol and li.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Indicateur d’étapes : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Affirmation couverte : Indicateur d’étapes : guide WCAG informatif pour évaluer l'apparence visible du focus clavier.

    • WCAG 2.2: Status Messages
      sourceId
      source-ui-wcag-understanding-status-messages
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:cf2a8c16b20c1a94164c9a37e2b3f15d9a7d3f47d88385d47432d6a29655609e
      status
      verified

      Affirmation couverte : Indicateur d’étapes : guide WCAG informatif sur les messages d'état annoncés sans déplacer le focus.