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.

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.

Design

Typografie

Abstände

Über alle Breakpoints

Barrierefreiheit

Relevante BITV-Anforderungen

• 1.1.1 Nicht-Text-Inhalt
• 1.3.1 Info und Beziehungen
• 2.4.8 Position

Testhinweise & Akzeptanzkriterien

Name:

Der Zweck der Fortschrittsanzeige wird durch eine aussagekräftige Beschriftung kommuniziert.

Rolle:

Identifiziert sich als eine Form der Fortschrittsanzeige.

Wert:

Kommuniziert den aktuellen Zustand.

Aktion:

Nicht anwendbar, da rein statisches Element.

Darstellung:

Der Schriftgrad kann Browser- oder Systemseitig um bis zu 200 % vergrößert werden, ohne dass Informationen verloren gehen. Bis zu 400 % müssen Inhalte so umbrechen, dass sie ohne horizontales Scrollen verfügbar sind.