Schalter
Verwendung
Überblick
Ein Schalter ist eine Komponente, die zwischen zwei möglichen Zuständen wechselt: aktiv und inaktiv. Der Schalter wird für globale Optionen verwendet, z. B. auf Einstellungsseiten, wenn der Benutzer etwas ein- oder ausschalten muss.
Eine ausführliche Orientierungshilfe zur Verwendung dieser Komponente finden Sie im folgenden Entscheidungsbaum für UI-Komponenten.
Zu verwenden
Zum Umschalten eines Anwendungsstatus zwischen zwei Optionen wie ein/aus und aktiv/inaktiv. Achten Sie darauf, dass die Schalter sofort wirksam werden und keine weitere Aktion erfordern.
Nicht zu verwenden
- Für eine Wahr/Falsch-Auswahl innerhalb eines Formulars. Verwenden Sie stattdessen die Optionsfeldgruppe oder die Umschaltflächengruppe.
- Wenn zum Anwenden einer Einstellung eine Schaltfläche zu betätigen ist. Verwenden Sie stattdessen das Kontrollkästchen.
Formatierung
Aufbau
Der Schalter besteht aus den folgenden Elementen:
- Beschriftung: Prägnanter Text, der die spezifische Funktion oder die Einstellung der Schaltersteuerung beschreibt.
- Skala: horizontaler Pfad, auf dem die Benutzer den Ziehpunkt des Schalters verschieben.
- Ziehpunkt: Bewegliches Element, das die Benutzer entlang der Skala schieben können, um den Schalterstatus umzuschalten.
Platzierung von Beschriftungen
Die Beschriftung für den Schalter kann oben (Standard und empfohlen) oder links von der Eingabe selbst erscheinen.
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.
Beschriftungstext
Die Beschriftungen müssen deutlich machen, welche Funktion oder Einstellung der Schalter steuert, z. B. „Autom. speichern“.
Hilfetext
Schalter sind ein bekanntes Auswahlsteuerelement und bedürfen im Allgemeinen keiner zusätzlichen Erklärung. Das heißt, Sie müssen die Benutzer nicht anweisen, den Schalter „umzulegen“.
Verwenden Sie permanenten Hilfetext, wenn die Informationen für das Verständnis der Funktion des Schalters unerlässlich sind und immer sichtbar sein müssen.
Verhalten
Zustände
Der Schalter hat zwei Hauptzustände: abgewählt und angewählt.
| Visualisierung | Zustand | Beschreibung |
|---|---|---|
 | Abgewählt | Zeigt den „Aus“-Zustand an. |
 | Ausgewählt | Zeigt den „Ein“-Zustand an. |
Zusätzlich zum abgewählten und angewählten Zustand verfügen Schalter auch über die Zustände Aktiviert, Schwebend, Aktiv, Fokussiert und Deaktiviert.
| Visualisierung | Zustand | Beschreibung |
|---|---|---|
 | Aktiviert | Teilt dem Benutzer mit, dass das Element für die Interaktion aktiviert ist (Standardzustand). |
 | Schwebend | Zeigt an, dass der Benutzer den Mauszeiger auf dem Element positioniert hat. |
 | Aktiv | Gibt an, dass der Benutzer auf das Element klickt oder tippt. |
| Fokussiert | Zeigt an, dass der Benutzer das Element hervorgehoben hat, in der Regel über eine Eingabemethode wie eine Tastatur oder Sprachbefehl. Der Zustand „Fokussiert“ kann mit allen anderen Zuständen (einschließlich „Deaktiviert“) verwendet werden. |
 | Deaktiviert | Teilt dem Benutzer mit, dass das Element deaktiviert nicht interaktiv ist. Das Element ist ausgegraut. |
Interaktionen
Maus
Ein Benutzer interagiert mit einer Schalterkomponente, indem er mit der Maus darauf klickt, um zwischen ihrem Ein- und Aus-Zustand umzuschalten. Um den neuen Zustand anzuzeigen, ändern sich die Farbe der Skala und die Position des Ziehpunkts.
Tastatur
Die Schalterkomponente ist über die Tastatur fokussierbar. Die Space-Taste aktiviert und deaktiviert den Schalter.
Screenreader
Der Schalter hat den Typ „input“ und beinhaltet auch die aria-Rolle „switch“. Er leitet seinen barrierefreien Namen vom Wert der Textbezeichnung ab und schließt diesen Namen als Teil eines aria-label-Attributs ein. Wenn Sie den Wert der Beschriftung in Storybook ändern, ändert sich auch der aria-label-Wert. Der aria-checked-Wert wechselt je nach Status des Elements von „true“ zu „false“; diese Änderung wird von Screenreadern als „ein“ bzw. „aus“ ausgegeben.
Barrierefreiheit
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, stellen Sie sicher, dass der Beschriftungstext des Schalters aussagekräftig und verständlich ist.