Schieberegler
Verwendung
Überblick
Der Schieberegler ist ein Steuerelement, bei dem der Benutzer einen einzelnen Wert oder einen Wertebereich aus einem festen Satz von Optionen auswählt. Er ist eine visuelle Darstellung eines einstellbaren Werte- oder Inhaltsbereichs. Die Benutzer können einen bestimmten Wert auswählen, indem sie einen Ziehpunkt horizontal entlang einer Skala verschieben.
Zu verwenden
- Zur Auswahl eines einzelnen Wertes oder eines Wertebereichs aus einem festen Satz von Optionen.
- Wenn für den Benutzer nicht der genaue Wert wichtig ist, sondern nur der ungefähre Bereich.
Nicht zu verwenden
- Anpassung numerischer Felder um einen kleinen diskreten Betrag. Verwenden Sie stattdessen den Stepper.
- Zur Auswahl eines genauen Wertes. Verwenden Sie stattdessen die Zahleneingabe.
Quelle: Nielsen Norman
Formatierung
Aufbau
Der Schieberegler besteht aus den folgenden Elementen:
- Schieberegler-Beschriftung: Text, der den Zweck der Auswahlsteuerung beschreibt
- Minimalwert: der niedrigste Wert in dem Bereich, aus dem der Benutzer auswählen muss.
- Ausgefüllte Skala: Eine visuelle Anzeige, die den ausgewählten Bereich oder Fortschritt entlang des Schiebereglers von der Startposition bis zur aktuellen Position hervorhebt.
- Ziehpunkt: Element, das der Benutzer zum gewünschten Punkt im Wertebereich verschieben kann. Die ausgewählten Werte werden unterhalb des Ziehpunkts des Schiebereglers angezeigt.
- Skala: horizontale Linie, die eine Reihe von Werten darstellt, aus denen Benutzer auswählen können.
- Maximalwert: der höchste Wert in dem Bereich, aus dem der Benutzer auswählen muss.
Platzierung von Beschriftungen
Zeigen Sie die Schieberegler-Beschriftungen über oder neben dem Schieberegler an und nicht darunter, damit sie sichtbar bleiben, während der Benutzer einen Wert auswählt.
Layout und Ausrichtung
Bei Sprachen, die von links nach rechts geschrieben werden (z. B. Sprachen in lateinischer, kyrillischer, neugriechischer, indischer und südostasiatischer Schrift), erscheint der Minimalwert am linken Ende der Skala und der Maximalwert ganz rechts.
Bei Sprachen, die von rechts nach links geschrieben werden (z. B. Sprachen mit arabischer und hebräischer Schrift), ist die Ausrichtung der Werte umgekehrt.
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.
Eine Beschriftung einfügen
Verwenden Sie die Schieberegler-Beschriftung, um anzugeben, welchen Wert der Benutzer damit ändert. Die Beschriftung sollte kurz und prägnant sein. Beschränken Sie sich auf eine einzige Zeile Text.
Groß- und Kleinschreibung verwenden
Bei Schieberegler-Beschriftungen sollte die übliche Groß- und Kleinschreibung verwendet werden; sie sollten keine Interpunktionszeichen enthalten.
Weitere Informationen zum Implementieren der Groß- und Kleinschreibung finden Sie im UI-Textstyleguide.
Verhalten
Zustände
Der Schieberegler kann fünf grafische Zustände annehmen, die zur Vermittlung des Status dienen: aktiviert, schwebend, aktiv, fokussiert und deaktiviert.
| Visualisierung | Zustand | Beschreibung |
|---|---|---|
 | Aktiviert | Zeigt dem Benutzer an, dass das Element für die Interaktion aktiviert ist. |
 | Schwebend | Zeigt an, dass der Benutzer den Mauszeiger über dem Ziehpunkt des Schiebereglers platziert hat. |
 | Fokussiert | Zeigt an, dass der Benutzer auf den Ziehpunkt des Schiebereglers klickt. |
 | Aktiv | Zeigt an, dass der Schieberegler fokussiert ist und dass die Tastatur verwendet werden kann, um einen Wert auszuwählen. Der Zustand „Fokussiert“ kann mit allen anderen Zuständen (einschließlich „Deaktiviert“) verwendet werden. |
 | Deaktiviert | Teilt dem Benutzer mit, dass das Element nicht interaktiv ist. |
Interaktionen
Maus
Benutzer können einen numerischen Wert auswählen, indem sie den Ziehpunkt des Schiebereglers mit der Maus verschieben. Standardmäßig ändert sich der Wert in Einerschritten.
Sie können die step-Eigenschaft zur Steuerung der Inkremente verwenden, um die sich der Wert ändert, wenn der Benutzer den Ziehpunkt des Schiebereglers bewegt. Wenn die step-Eigenschaft festgelegt ist, ändert sich der Wert des Schiebereglers nur um Werte, die ein Vielfaches des angegebenen Schrittwerts sind. Wenn z. B. der Schieberegler einen Bereich von 0 bis 100 aufweist und die step-Eigenschaft auf 5 festgelegt wird, kann der Benutzer mit dem Schieberegler nur Werte auswählen, die Vielfache von 5 sind (0, 5, 10, 15, ..., 100). Das bedeutet, dass der Ziehpunkt des Schiebereglers beim Ziehen durch den Benutzer an diesen spezifischen Werten einrastet.
Tastatur
Der Ziehpunkt des Schiebereglers ist über die Tastatur fokussierbar. Werte können mit den Pfeiltasten erhöht und verringert werden.
Screenreader
Diese Komponente umfasst die WAI-ARIA-Rolle „Schieberegler“ und das aria-orientation-Attribut „horizontal“, um ihren Zweck und ihre Ausrichtung zu vermitteln. Der Ziehpunkt des Schiebereglers und seine Beschriftung werden über aria-labelledby verknüpft. In gleicher Weise sind die Attribute aria-valuemin, aria-valuemax und aria-valuenow enthalten, um den Benutzern von Screenreadern die Bedeutung zu vermitteln. Wertänderungen werden mittels role='alert' vermittelt.
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.
Lesen Sie unbedingt die Anleitung, auf die in den WAI-ARIA-Erstellungspraktiken für Schieberegler verwiesen wird.