FigmaOpenCode

Progress

Synonyme: Stepper, Fortschrittsanzeige
Ähnliche Komponenten: Loader

Kurzbeschreibung

Der Progress zeigt die Gesamtdauer und den Fortschritt eines mehrstufigen Prozesses an.

Beispiele

Progress mit Label oben

Code anzeigen

<div class="kern-progress">
<label class="kern-label" for="progress1">Schritt 2 von 5</label> 
<progress id="progress1" value="2" max="5"></progress>
</div>

Progress mit Label unten

Code anzeigen

<div class="kern-progress">
<progress id="progress2" value="5" max="8"></progress>
<label class="kern-label" for="progress2">Schritt 5 von 8</label> 
</div>

Progress ohne Label

Code anzeigen

<div class="kern-progress">
<progress value="35" max="100"></progress>
</div>

Beschreibung

Der Progress bietet kontinuierliches Feedback und Orientierung darüber, in welchem Schritt sich Nutzende befinden und wie viele noch ausstehen. Dies hilft den Nutzenden, den Fortschritt besser einzuschätzen und motiviert sie, den Prozess zu beenden. Jeder Schritt repräsentiert eine Phase oder Etappe innerhalb des Prozesses. Der Fortschritt wird in Balkenform angezeigt bis der Vorgang abgeschlossen ist. Die Gesamtlänge wird in gleichmäßige Schritte eingeteilt. Verlängert sich der Prozess durch zusätzliche Schritte, die durch Nutzendenauswahl nötig werden, kann sich die verbleibende Schrittanzeige neu aufteilen.

Nutzende können sich entweder linear oder, falls erlaubt, nicht-linear zwischen den Schritten bewegen (z. B. über die Navigation einer Aufgabenliste). Der Progress selber ist nicht interaktiv.

Eine Progress-Komponente kann ohne ein Label genutzt werden. Nutze die Komponente besser mit Label, oder teste mit Nutzenden, ob sie im jeweiligen Kontext auch ohne Label sichtbar genug ist. Wird sie mit einem Label verwendet, kann dieses oberhalb oder unterhalb des Balkens angezeigt werden. Das Label sollte den aktiven Schritt und die Anzahl der zu erwartenden Schritte anzeigen, z. B. „Schritt 2 von 5“.

Verwendungsregeln

Der Progress eignet sich besonders für Prozesse, die in einer festen Reihenfolge ablaufen. Er unterteilt einen komplexen Prozess in kleinere, besser verständliche Schritte.

Beispiele:

• Schritte in einem Online-Dienst
• Registrierungsprozess
• Bezahlprozess

Dos und Don’ts

• Verwende den Progress nicht für Ladevorgänge.

Weitere Hinweise

• Setze den Progress bei linearen und chronologischen Prozessen ein, bei denen eine feste Reihenfolge der Schritte erforderlich ist.
• Vermeide es, den Progress für sehr lange oder komplexe Prozesse zu verwenden, die mehr als zehn Schritte umfassen, da dies Nutzende überfordern kann.

Barrierefreiheit

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

Implementierungsabhängig

WCAG 1.1.1

Progress-Bar hat aussagekräftige Beschreibung

Implementierungsabhängig

WCAG 2.2.1

Lange Progress Zeit hat Timeout-Information

Implementierungsabhängig

WCAG 3.3.2

Progress-Zweck ist eindeutig beschrieben

Implementierungsabhängig

WCAG 4.1.3

Progress-Updates werden an Screenreader übermittelt

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 1.3.1

Progress-Werte sind programmatisch erkennbar

Bestanden

WCAG 1.4.1

Progress-Zustand wird nicht nur durch Farbe vermittelt

Bestanden

WCAG 1.4.6

Progress-Text erfüllt das minimale Kontrastverhältnis von 7:1

Bestanden

WCAG 1.4.11

Progress-Bar hebt sich mit mindestens 3:1 Kontrast ab

Bestanden

WCAG 4.1.2

Progress-Werte sind korrekt und aktuell

Siehe auch: BFIT Handreichungen