Zum Hauptinhalt springen

Einfacher Fortschrittsbalken

Einfacher Fortschrittsbalken in Storybook

Verwendung​

Überblick​

Der einfache Fortschrittsbalken zeigt den aktuellen Status eines Systemvorgangs an, z. B. Laden, Hochladen oder Übermitteln. Außerdem wird der Fortschritt einer bestimmten Aufgabe vor dem Abschluss angezeigt.

Zu verwenden​

Verwenden Sie einen Fortschrittsbalken, um den aktuellen Status eines Systemvorgangs anzuzeigen, z. B. Laden, Hochladen oder Übermitteln, insbesondere in folgenden Fällen:

  • Der Fortschritt der Aufgabe ist messbar (z. B. Abschluss in Prozent).
  • Die Aufgabe ist komplex oder hat eine lange Wartezeit und Benutzer benötigen Feedback zum Status.
  • Bei langwierigen Vorgängen soll die Ungewissheit für Benutzer durch visuelles Feedback verringert werden.

Nicht zu verwenden​

Verwenden Sie in den folgenden Fällen keinen Fortschrittsbalken:

  • Für sehr kurze Aufgaben, für die kein detailliertes Feedback erforderlich ist: Verwenden Sie stattdessen einfachere Indikatoren wie eine Ladeanzeige.
  • Zum Anzeigen des Fortschritts in einer Reihe von einzelnen Schritten (z. B. Ausfüllen eines Formulars in mehreren Schritten). Verwenden Sie stattdessen den Schrittfortschrittsbalken.
  • Zum Anzeigen von Schritten und Unterschritten für eine bestimmte Aufgabe oder zum Verwenden von benutzerdefinierten Symbolen. Verwenden Sie stattdessen den Phasenfortschrittsbalken.

Formatierung​

Aufbau​

Abbildung des Aufbaus eines einfachen Fortschrittsbalkens

Der Fortschrittsbalken besteht aus den folgenden Elementen:

  1. Beschriftung: Beschreibt die Aufgabe oder den Vorgang, die mit dem Fortschrittsbalken verfolgt werden.
  2. Numerischer Wert: Stellt den Fortschritt eines Systemvorgangs oder einer Aufgabe innerhalb des Bereichs des Fortschrittsbalkens dar. Der numerische Wert wird als Anteil oder Prozentwert angezeigt.
  3. Balken: Zeigt den Fortschritt eines Systemprozesses oder einer Aufgabe als ausgefüllten Balken an.

Ausrichtung und Positionierung​

Die Beschriftung kann über oder unter dem Fortschrittsbalken angezeigt werden.

Abbildung der Platzierungsoptionen für die Beschriftung des einfachen Fortschrittsbalkens

Inhalt​

Allgemeine Richtlinien fürs Schreiben​

  • Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
  • Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
  • Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
  • Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
  • Halten Sie Wörter und Sätze kurz.

Beschriftung des Fortschrittsbalkens​

  • Fügen Sie eine Beschriftung für den Fortschrittsbalken hinzu, um Informationen zum Kontext des ausgeführten Vorgangs oder der ausgeführten Aufgabe anzuzeigen. In seltenen Fällen, in denen der Kontext ausreicht, kann die Beschriftung ausgeblendet werden. Diese Fortschrittsbalken müssen dennoch ein aria-label-Attribut enthalten, damit sie barrierefrei sind.
  • Halten Sie die Beschriftung des Fortschrittsbalkens kurz und prägnant. Beschränken Sie die Beschriftung auf wenige Wörter oder eine einzige Textzeile.
  • Verwenden Sie bei Beschriftungen die übliche Groß- und Kleinschreibung. Das erste Wort eines Satzes und Eigennamen werden groß geschrieben. Weitere Informationen zur Groß- und Kleinschreibung finden Sie im entsprechenden Abschnitt.

Barrierefreiheit​

Der einfache Fortschrittsbalken enthält die WAI-ARIA-Rolle 'progressbar'. Außerdem enthält er die WAI-ARIA-Attribute aria-valuetext, aria-valuenow, aria-valuemin und aria-valuemax, um zusätzliche Informationen für assistive Technologien bereitzustellen.

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

  • Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
  • Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
  • Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
  • Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Wenn Sie diese Komponente in Ihrer Anwendung verwenden, achten Sie darauf, dass die Beschriftung des Fortschrittsbalkens aussagekräftig und prägnant ist. Wenn Sie die Beschriftung ausblenden möchten, geben Sie eine label-Eigenschaft an und legen Sie hideLabel auf True fest. Damit wird das Attribut aria-label für die Beschriftung festgelegt.