Comparaison comportementale
Fil d’Ariane vs Indicateur d’étapes
Différence décisive
Le Fil d’Ariane montre où la page se situe dans une hiérarchie déjà existante ; l’Indicateur d’étapes montre où l’utilisateur en est dans un processus ordonné.
Critères de choix, liens et sources
- Fil d’ArianeChoisis Fil d’Ariane si les pages ont des parents et que l’utilisateur peut remonter d’un niveau.Ouvrir la fiche Fil d’Ariane
- Indicateur d’étapesChoisis Indicateur d’étapes si un processus linéaire a des étapes terminées, courante et à venir.Ouvrir la fiche Indicateur d’étapes
Voir les neuf dimensionsVoir les sources
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 ?
Fil d’Ariane
Contexte commun aux essais
Fil d’Ariane
Mission
Fil d’Ariane
Focalise l’ancêtre Réglages, active-le et vérifie que sa destination remplace l’emplacement actuel Facturation.
É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
- Facturation, l’emplacement actuel, est exposé séparément des liens ancêtres.
- Cas limite
- Les longs libellés traduits reviennent à la ligne ou se condensent sans transformer les séparateurs en contrôles ni perdre les noms accessibles.
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.
- Détails terminée
- Documents actuelle
- Vérification à venir
2 / 3 — Documents
Les segments communiquent l’état ; les boutons séparés pilotent le parcours.
É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
Le fil d’Ariane expose l’ascendance de la page courante ; la pagination parcourt des pages sœurs découpées par quantité, tandis que l’indicateur d’étapes suit des étapes métier.
Lequel convient à ton besoin ?
Fil d’Ariane
Les pages appartiennent à une hiérarchie de plusieurs niveaux
Indicateur d’étapes
Un processus linéaire stable comporte au moins trois sections utiles
Différence et sources
Le fil d’Ariane expose l’ascendance de la page courante ; la pagination parcourt des pages sœurs découpées par quantité, tandis que l’indicateur d’étapes suit des étapes métier.
Consulter les sourcesParties 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.
Fil
La séquence ordonnée qui communique la hiérarchie environnante.
Décision
Question de famille
Faut-il situer la page dans une hiérarchie, parcourir des pages de résultats ou montrer l’étape d’un processus ?
Trois critères pour choisir
- Cas d’usage
Fil d’Ariane
Les pages appartiennent à une hiérarchie de plusieurs niveaux
Indicateur d’étapes
Un processus linéaire stable comporte au moins trois sections utiles
- Interactivité
Fil d’Ariane
Les ancêtres sont des liens ; la page actuelle est identifiée et généralement en texte simple.
Indicateur d’étapes
Communique surtout les étapes terminées, actuelle et à venir ; une étape n’est interactive que si la navigation est réellement permise.
- Rôle accessible
Fil d’Ariane
nav[aria-label] > ol > li > a[aria-current=page]
Indicateur d’étapes
ol > li[aria-current=true] + heading
Neuf dimensions
- Déclenchement
Fil d’Ariane
Activer le lien nommé d’un ancêtre remonte dans la hiérarchie actuelle.
Indicateur d’étapes
Le parcours environnant avance ou revient entre des étapes significatives du processus.
- Modalité
Fil d’Ariane
Navigation non modale ; la page actuelle reste entièrement disponible.
Indicateur d’étapes
Contexte de progression non modal pour une tâche en plusieurs étapes ; il ne bloque pas l’étape actuelle.
- Positionnement
Fil d’Ariane
Un fil compact avant le titre principal, ordonné de la racine à la page actuelle.
Indicateur d’étapes
Près du titre du parcours, ordonné de la première à la dernière étape.
- Interactivité
Fil d’Ariane
Les ancêtres sont des liens ; la page actuelle est identifiée et généralement en texte simple.
Indicateur d’étapes
Communique surtout les étapes terminées, actuelle et à venir ; une étape n’est interactive que si la navigation est réellement permise.
- Focus
Fil d’Ariane
Le focus visible reste sur chaque lien ancêtre jusqu’à la navigation ; la page actuelle en texte simple n’ajoute pas d’arrêt Tab.
Indicateur d’étapes
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
Fil d’Ariane
Le fil d’Ariane est une navigation persistante et ne se ferme pas.
Indicateur d’étapes
L’indicateur est un contexte persistant du parcours et ne se ferme pas.
- Rôle accessible
Fil d’Ariane
nav[aria-label] > ol > li > a[aria-current=page]
Indicateur d’étapes
ol > li[aria-current=true] + heading
- Cas d’usage
Fil d’Ariane
Les pages appartiennent à une hiérarchie de plusieurs niveaux
Indicateur d’étapes
Un processus linéaire stable comporte au moins trois sections utiles
- Comportement mobile
Fil d’Ariane
Conserver la position actuelle et l’ancêtre le plus proche sans faire dépendre la hiérarchie essentielle d’un défilement horizontal.
Indicateur d’étapes
Conserver un titre concis « étape X sur Y » et masquer les libellés secondaires avant de rendre l’état illisible.
| Dimension | Fil d’ArianeBreadcrumbs | Indicateur d’étapesStepper |
|---|---|---|
| Déclenchement | Activer le lien nommé d’un ancêtre remonte dans la hiérarchie actuelle. | Le parcours environnant avance ou revient entre des étapes significatives du processus. |
| Modalité | Navigation non modale ; la page actuelle reste entièrement disponible. | Contexte de progression non modal pour une tâche en plusieurs étapes ; il ne bloque pas l’étape actuelle. |
| Positionnement | Un fil compact avant le titre principal, ordonné de la racine à la page actuelle. | Près du titre du parcours, ordonné de la première à la dernière étape. |
| Interactivité | Les ancêtres sont des liens ; la page actuelle est identifiée et généralement en texte simple. | Communique surtout les étapes terminées, actuelle et à venir ; une étape n’est interactive que si la navigation est réellement permise. |
| Focus | Le focus visible reste sur chaque lien ancêtre jusqu’à la navigation ; la page actuelle en texte simple n’ajoute pas d’arrêt Tab. | 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 | Le fil d’Ariane est une navigation persistante et ne se ferme pas. | L’indicateur est un contexte persistant du parcours et ne se ferme pas. |
| Rôle accessible | nav[aria-label] > ol > li > a[aria-current=page] | ol > li[aria-current=true] + heading |
| Cas d’usage | Les pages appartiennent à une hiérarchie de plusieurs niveaux | Un processus linéaire stable comporte au moins trois sections utiles |
| Comportement mobile | Conserver la position actuelle et l’ancêtre le plus proche sans faire dépendre la hiérarchie essentielle d’un défilement horizontal. | Conserver un titre concis « étape X sur Y » et masquer les libellés secondaires avant de rendre l’état illisible. |