Schrittleiste für Website (Stepper in HTML und CSS)
Schreibe einen Schritt pro Zeile, wähle den aktuellen und den Stil. Die Vorschau aktualisiert sich sofort und der Code ist fertig zum Einfügen.
So geht’sZeige, bei welchem Schritt die Person ist
Verfügbar auf: 
Schrittleiste für Website (Stepper in HTML und CSS): wofür es gut ist
Erzeuge die Leiste, die zeigt, bei welchem Schritt die Person ist: Warenkorb, Lieferung, Zahlung und Bestätigung; Daten, Adresse und Überprüfung; Bestellung erhalten, in Vorbereitung und unterwegs. Schreibe einen Schritt pro Zeile, wähle den aktuellen, die Richtung und die Farben. Abgeschlossene Schritte erhalten einen Haken, und die Linie dazwischen folgt dem Fortschritt.
Der Code nutzt eine geordnete Liste, mit aria-current="step" am aktuellen Schritt und einem versteckten Hinweis „abgeschlossen“ für Screenreader. Horizontal zeigt die Leiste auf schmalen Bildschirmen nur die Zahlen und den Namen des aktuellen Schritts. Dazu gibt es eine Funktion irPara(n), um den Schritt per JavaScript zu wechseln.
So geht’s
- Schreibe die Schritte, einen pro Zeile.
- Wähle aktuellen Schritt, Richtung und Farben.
- Kopiere den Code oder lade das HTML herunter.
Wann nutzen
- Checkout des Onlineshops.
- Mehrteiliges Anmeldeformular.
- Bestellverfolgung.
Häufige Fragen
Ist die Schrittleiste barrierefrei?
Ja. Sie ist eine geordnete Liste (ol), sodass der Screenreader die Anzahl der Schritte und die Position jedes Schritts ansagt. Der aktuelle Schritt trägt aria-current="step", und abgeschlossene haben einen versteckten Text, der „abgeschlossen“ sagt.
Funktioniert sie auf dem Handy?
Im horizontalen Modus zeigt die Leiste auf schmalen Bildschirmen nur die Zahlen und den Namen des aktuellen Schritts, damit der Text nicht gequetscht wird. Der vertikale Modus funktioniert auf jedem Bildschirm gleich und eignet sich gut für die Bestellverfolgung.
Wie ändere ich den aktuellen Schritt per JavaScript?
Tausche die Klassen: Die vorherigen Schritte bekommen feito, der aktuelle atual und aria-current="step", und die folgenden bleiben ohne Klasse. Der erzeugte Code enthält eine Funktion irPara(n), die das erledigt.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.