Stepper Navigation

Die stepper Komponente zeigt den Fortschritt eines mehrstufigen Prozesses an. Zu den gängigen Anwendungsfällen zählen Checkout-Abläufe, Registrierungsassistenten oder Onboarding-Abläufe.

WCAG AA

Funktionen

  • Status der Schritte: Status „Aktiv“, „Erfolgreich“ und „Fehlgeschlagen“ mit visuellen Anzeigen.

  • Beschreibungen: Optionaler Beschreibungstext unterhalb der Überschrift jedes Schritts.

  • Anklickbare Schritte: Schritte können mit den entsprechenden Seiten verlinkt sein.

  • Aktueller Schritt hervorgehoben: Visuelle Hervorhebung des aktiven Schritts.

HTML

Verwendung

Die Komponente wird über das stepper Tag eingebunden.

{% load insight_tags %} {% stepper config=stepper_config %} <!-- or --> {% stepper items=stepper_items %}

Parameter

Laden…

config (StepperConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
items

Liste der Schrittkonfigurationen.

 [] False
StepperConfig( items=[ StepperItemConfig(title="Address", description="Enter shipping address", success=True), StepperItemConfig(title="Payment", description="Select payment method", current=True), StepperItemConfig(title="Review", description="Review and confirm"), ], )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Die Komponente verwendet ein semantisches <ol>-Element für die geordnete Schrittliste.

  • Schrittnummern werden als Text angezeigt und können von Screenreadern gelesen werden.

  • Die SVG-Pfeile werden mit aria-hidden='true' ausgeblendet.

  • Der Status eines Schritts (erfolgreich, fehlgeschlagen, aktuell) wird über Textbeschriftungen angezeigt.

  • Dekorative Status-Icons übernehmen den Attributwert aria-hidden='true' von der Icon-Komponente.

  • Der aktuelle Schritt ist mit aria-current='step' gekennzeichnet.

Verwandte Themen