Barre d’étapes pour site (stepper en HTML et CSS)
Écrivez une étape par ligne, choisissez l’étape actuelle et le style. L’aperçu se met à jour immédiatement et le code est prêt à coller.
Mode d’emploiMontrez à quelle étape en est la personne
Disponible en: 
Barre d’étapes pour site (stepper en HTML et CSS): à quoi ça sert
Générez la barre qui montre à quelle étape en est la personne : panier, livraison, paiement et confirmation ; informations, adresse et vérification ; commande reçue, en préparation et en route. Écrivez une étape par ligne, choisissez l’étape actuelle, la direction et les couleurs. Les étapes terminées reçoivent une coche et la ligne qui les relie suit la progression.
Le code utilise une liste ordonnée, avec aria-current="step" sur l’étape actuelle et une mention masquée « terminée » pour les lecteurs d’écran. À l’horizontale, sur les écrans étroits, la barre n’affiche que les numéros et le nom de l’étape actuelle. Une fonction irPara(n) est aussi fournie pour changer d’étape avec JavaScript.
Mode d’emploi
- Écrivez les étapes, une par ligne.
- Choisissez l’étape actuelle, la direction et les couleurs.
- Copiez le code ou téléchargez le HTML.
Quand l’utiliser
- Paiement d’une boutique en ligne.
- Formulaire d’inscription en plusieurs parties.
- Suivi de commande.
Questions fréquentes
La barre d’étapes est-elle accessible ?
Oui. C’est une liste ordonnée (ol) : le lecteur d’écran annonce donc le nombre d’étapes et la position de chacune. L’étape actuelle porte aria-current="step", et les étapes terminées ont un texte masqué qui indique terminée.
Fonctionne-t-elle sur mobile ?
En mode horizontal, sur les écrans étroits, la barre n’affiche que les numéros et le nom de l’étape actuelle, pour ne pas écraser le texte. Le mode vertical fonctionne de la même façon sur tous les écrans et convient bien au suivi de commandes.
Comment changer l’étape actuelle avec JavaScript ?
Changez les classes : les étapes précédentes reçoivent feito, l’actuelle reçoit atual et aria-current="step", et les suivantes n’ont pas de classe. Le code généré fournit une fonction irPara(n) qui fait cela.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.