Fortschrittsanzeige

Verwendung

Die Fortschrittsanzeige dient der einfachen statischen Darstellung von Schritten und der aktuellen Position in einem laufenden Prozess.

Positionierung & responsives Verhalten

Die Fortschrittsanzeige sollte als erste Komponente in einer Maske platziert werden, wenn die ganze Seite für den aktuellen Schritt genutzt wird.
Gilt die Fortschrittsanzeige für den gesamten Screen, dann erstreckt sie sich von der ersten bis zur letzten Spalte.
Die Fortschrittsanzeige muss immer über den Inhalten des darin anzeigten Schritts stehen.
Die Überschrift des aktuellen Schritts ist 16px unterhalb des Schritt-Labels positioniert.

Fortschrittsanzeige auf einem Smartphone alleinstehend

Fortschrittsanzeige auf einem Tablet alleinstehend

Alternative Positionierung

Die Fortschrittsanzeige kann in einem Container platziert werden, wenn der aktuelle Screen nicht Teil des Prozesses ist.
Da die Überschrift in diesem Fall nicht die erste Überschrift der aktuellen Seite ist, können auch die Überschriften H2-H4 verwendet werden.

Fortschrittsanzeige auf einem Tablet innerhalb eines Content-Containers

Fortschrittsanzeige auf einem Smartphone innerhalb eines Content-Containers

Design

Typografie

Visualisierung der CSS-Regeln zu Ziffer 1 bis 2 aus der folgenden Tabelle.

Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
Element: Schritt-Label
Objekt	Eigenschaft	Wert
Schriftart	`font-family`	`BundesSans`
Schriftgrad	`font-size`	`.9rem`
Zeilenhöhe	`line-height`	`1.25`
Schriftschnitt	`font-weight`	`400`
Schriftfarbe	`color`	`#1F3347`

Abstände

Über alle Breakpoints

Visualisierung der CSS-Regeln zu Ziffer 3 bis 8 aus der folgenden Tabelle.

Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
2	Element: Fortschrittsanzeige Container
	Objekt	Eigenschaft	Wert
	Breite	`width`	`100%`
	Höhe	`height`	`.25rem`
	Anordnung	`flex-direction`	`row`
	Ausrichtung	`align-items`	`stretch`
	Ausrichtung	`justify-content`	`stretch`
	Abstand	`gap`	`.1875rem`
3	Element: Fortschrittsanzeige Segment — Vergangener & aktueller Schritt
	Rahmen-Proportionen	`box-sizing`	`border-box`
	Rahmen	`border`	`.125rem solid rgba(31, 51, 71, 0)`
	Eckradius	`border-radius`	`.125rem`
	Hintergrundfarbe	`background-color`	`#2D6F9E`
4	Element: Fortschrittsanzeige Segment — Nächster Schritt
	Rahmen-Proportionen	`box-sizing`	`border-box`
	Rahmen	`border`	`.0625rem solid rgba(31, 51, 71, 0)`
	Eckradius	`border-radius`	`.125rem`
	Hintergrundfarbe	`background-color`	`rgba(31, 51, 71, .16)`
5	Element: Schritt-Label
5	Außenabstand	`margin`	`.5rem 0 0 0`

Code

HTML

Aufgrund von Herausforderungen in der Barrierefreiheit und der unnötigen Komplexität verzichtet das Design System auf das in der HTML5-Spezifikation vorgesehene Element <progress>.

WAI-ARIA

ARIA-Attribute dienen der verbesserten Barrierefreiheit: Das programmatisch zu setzende Attribut "aria-valuenow" dient zur Angabe des aktuellen Fortschritts, welcher sich innerhalb des durch "aria-valuemin" und "aria-valuemax" definierten Bereichs bewegt. Standardmäßig sind diese auf die Werte "0" und "100" gesetzt, repräsentieren also einen prozentualen Fortschritt. Zusätzlich wird die Ausgabe des aktuellen Zustands der Fortschrittsanzeige über das aria-describedby-Attribut mit einem sinnbildenden Text verknüpft, der die Gesamtzahl der Schritte und den aktuellen Standort im Prozess vermittelt („Schritt 1 von 3“).

CSS

Die Breite des Fortschrittsbalkens lässt sich flexibel anpassen. Dies geschieht inline über das style-Attribut. Hier müssen Prozentwerte verwendet werden, um ein dynamisches und responsives Verhalten zu gewährleisten.