Umschaltflächengruppe
Verwendung
Überblick
Die Umschaltflächengruppe ist ein Steuerelement, bei dem der Benutzer eine einzige Option aus einer Reihe von zwei bis vier sich gegenseitig ausschließenden Optionen auswählt. Diese Komponente besteht aus mehreren Umschaltflächen, wobei jeweils nur eine Schaltfläche aktiv oder ausgewählt ist.
Eine ausführliche Orientierungshilfe zur Verwendung dieser Komponente finden Sie im folgenden Entscheidungsbaum für UI-Komponenten.
Zu verwenden
- Wenn Benutzern 2 bis 4 einander ausschließende Optionen innerhalb eines Formulars präsentiert werden.
- Zum Umschalten zwischen Ansichten.
Nicht zu verwenden
- Wenn es mehr als 4 Optionen gibt, aus denen der Benutzer wählen kann. Verwenden Sie in diesem Fall die Dropdown-Auswahl oder die Combobox.
- Wenn es 3–4 Optionen in mobilen Anwendungen gibt. Verwenden Sie in diesem Fall die Optionsfeldgruppe.
- Wenn es nur eine auswählbare Option gibt. Verwenden Sie in diesem Fall ein einzelnes Kontrollkästchen.
Formatierung
Aufbau
Die Umschaltflächengruppe besteht aus den folgenden Elementen:
- Gruppenbeschriftung: Eine Beschriftung, die den Zweck der Umschaltflächengruppe beschreibt.
- Umschaltfläche: Eine einzelne Schaltfläche innerhalb der Umschaltflächengruppe, die eine auswählbare Option darstellt.
- Umschaltflächenbeschriftung: Die Textbezeichnung zur Beschreibung der mit der Umschaltfläche verknüpften Option.
Layout und Ausrichtung
Stellen Sie sicher, dass alle Umschaltflächenelemente die gleiche Breite aufweisen, um die visuelle Konsistenz und Bedeutung aufrechtzuerhalten.
Best Practices
Wenn Sie die Umschaltflächengruppe verwenden, um zwischen Ansichten zu wechseln, sollte die Umschaltaktion die Änderung sofort bewirken, ohne dass eine zusätzliche Aktion erforderlich ist.
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.
Beschriftungen
Gruppenbeschriftung
Es ist zwar nicht zwingend erforderlich, eine übergeordnete Gruppenbeschriftung anzugeben, es wird jedoch dringend empfohlen. In Fällen, in denen der Kontext ausreicht, kann die Beschriftung undefiniert bleiben. Eine Umschaltflächengruppe ohne sichtbare Beschriftung sollte dennoch ein aria-label mit aria-label oder aria-labelledby erhalten. Dieses aria-label vermittelt die kollektive Bedeutung aller Umschalter.
Umschaltflächenbeschriftungen
Die Umschaltflächenbeschriftungen sind obligatorisch. Jede Schaltfläche in der Umschaltgruppe muss über eine eindeutige beschreibende Textbeschriftung verfügen, damit sichergestellt ist, dass die Benutzer die verfügbaren Optionen verstehen. Halten Sie Beschriftungen aussagekräftig und sorgen Sie gleichzeitig für Eindeutigkeit. Verwenden Sie kurze, beschreibende Beschriftungen, die leicht zu erfassen und auf einen Blick zu verstehen sind.
Groß-/Kleinschreibung
Für Beschriftungstext wird die übliche Groß- und Kleinschreibung verwendet. Schreiben Sie den ersten Buchstaben des ersten Wortes in einem Satz oder einer Phrase immer groß.
Weitere Hinweise zum Implementieren der Groß- und Kleinschreibung finden Sie im Abschnitt zur Groß- und Kleinschreibung des UI-Textstyleguides.
Verhalten
Zustände
Umschaltflächen verhalten sich wie Schaltflächen, mit demselben interaktiven Status. Weitere Informationen finden Sie in der Dokumentation zu Schaltflächenkomponenten.
Interaktionen
Maus
Benutzer wählen eine Umschaltflächenoption aus, indem sie mit der Maus auf die gewünschte Schaltfläche klicken.
Die Benutzer können jeweils nur eine Umschaltfläche auswählen. Wenn ein Benutzer eine neue Auswahl trifft, wird die vorherige Auswahl automatisch aufgehoben.
Tastatur
Jede Schaltfläche kann über die Tastatur fokussiert werden. Verwenden Sie Tab und Shift+Tab, um zwischen Werten zu navigieren. Benutzer können jede Schaltfläche sowohl mit der Spacebar-Taste als auch mit der Enter-Taste auswählen.
Screenreader
Die Umschaltflächengruppe ist über das Attribut WAI-ARIA mit der Gruppenbeschriftung verknüpft: aria-labelledby. Das Attribut aria-pressed schaltet zwischen „true“ und „false“ um, um den Status jeder Schaltfläche anzugeben. Dies macht es blinden und sehbehinderten Benutzern einfacher, indem der Zweck der Umschaltfläche kommuniziert wird.
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 die Komponente der Umschaltflächengruppe in Ihrer Anwendung verwenden:
- Stellen Sie sicher, dass jede Schaltfläche eine eindeutige und aussagekräftige Beschriftung hat.
- Warnen Sie die Benutzer, wenn die Auswahl einer Umschalter-Komponente eine Änderung des Kontexts zur Folge hat.