Wechselschalter - Barrierefreie Gestaltung von User Interface-Elementen

Synonyme: Kippschalter, Umschalter, Switch, Switch Button, Toggle Switch

Siehe auch: Schalter, Checkbox, Menüschalter, Umschalter

Ein Wechselschalter dient der Auswahl der Werte „An“ oder „Aus“. Der Wechselschalter kann auch für andere Werte-Paare verwendet werden, sofern diese Werte in Textform vermittelt werden.

Ein Wechselschalter besitzt einen Rahmen, in dem sich ein visueller Indikator befindet, der aufgrund seiner Position den gewählten Wert anzeigt. Der Indikator ist meist ein Kreis, der sich links (Wert „Aus“) oder rechts (Wert „An“) im Rahmen befindet.

Abbildung: Wechselschalter im Status An und Aus

Darstellung

Die Anforderungen an Schalter werden im Abschitt „Schalter“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um einen Schalter handelt, der zwei Zustände besitzen kann.

Nr.	Eigenschaft	Beschreibung	Klassifizierung	Referenz
508	Kontrast	Der visuelle Indikator für den Wert muss zum Hintergrund ein Kontrastverhältnis von mindestens 3:1 aufweisen.	Muss	EN 301 549: 9.1.4.11, 11.1.4.11
509	Kontrast	Wird der Wert des Wechselschalters zusätzlich in Textform übermittelt, muss dieser zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 aufweisen.	Muss	EN 301 549: 9.1.4.3, 11.1.4.3
510	Wert	Der Wert des Wechselschalters soll zusätzlich in Textform übermittelt werden. Hinweis: Obwohl „An“ mit der rechten Position und „Aus“ mit der linken Position assoziiert ist, kann nicht davon ausgegangen werden, dass dies allen Benutzenden bekannt ist. Darüber hinaus wird der Wert häufig farblich gekennzeichnet („An“ mit grüner oder dunkler Farbe, „Aus“ mit rot oder heller Farbe). Die Farben können jedoch von beeinträchtigten Menschen ggf. nicht wahrgenommen werden.	Soll	DIN EN ISO 9241-143: 9.6.11

Bedienung

Nr.	Eigenschaft	Beschreibung	Klassifizierung	Referenz
511	Aktualisierungen	Bei Fokussierung und Bedienung des Wechselschalters darf keine unerwartete Kontextänderung erfolgen.	Muss	EN 301 549: 9.3.2.2, 11.3.2.2

Tastaturbedienung Wechselschalter

Aktion	Taste	Klassifizierung
Bedienung des Wechselschalters	LEER	Erforderlich
Bedienung des Wechselschalters	EINGABE	Empfohlen

Zeigeinstrumentbedienung Wechselschalter

Aktion	Taste	Klassifizierung
Bedienung des Wechselschalters	Linksklick	Erforderlich

Programmierung/Schnittstellen

Nr.	Eigenschaft	Beschreibung	Klassifizierung	Referenz
512	Rolle	Die Rolle Wechselschalter muss an die Accessibility API übermittelt werden (siehe Accessibility API).	Muss	EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
513	Wert	Der Wert des Wechselschalters muss an die Accessibility API übermittelt werden (siehe Accessibility API).	Muss	EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.7
514	Wert	Wenn die Werte des Wechselschalters nicht „An“ und „Aus“ repräsentieren, sondern für andere Zustände verwendet werden, die in Textform beim Wechselschalter sichtbar sind, dann müssen diese Werte an die Accessibility API übermittelt werden.	Muss	EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.7

Praxistipp Wechselschalter in Web-Anwendungen

Screenreader-Ausgabe

JAWS: [Beschriftung] Umschalter [aus | gedrückt an]
NVDA: [Beschriftung] Kontrollfeld [nicht aktiviert | aktiviert]
Windows Sprachausgabe: [Beschriftung] Schaltfläche [aus | ein]

Hinweis:

Obwohl mit role=switch eine eigene Rolle für Wechselschalter existiert, wird diese von den Screenreadern nicht ausgegeben. Stattdessen werden die Wechselschalter als Umschalter bzw. Checkboxen ausgegeben. Dies ist nicht problematisch, da die Funktionalität analog ist.
Problematisch ist lediglich, dass der Wert in Textform (sofern vorhanden) mit dem Screenreader nicht wahrnehmbar ist.

HTML

In HTML existiert kein Element für Wechselschalter. Stattdessen können Umschalter oder Checkboxen verwendet werden.

ARIA

Bei Wechselschaltern sollte Folgendes beachtet werden:

Die Rolle wird mit role=switch übermittelt.
Der Status wird mit aria-checked=true|false übermittelt und muss bei Bedienung aktualisiert werden.
Die Beschriftung kann per Textinhalt oder aria-labelledby erfolgen.
Der Wechselschalter kann mit aria-readonly als schreibgeschützt und mit aria-disabled als deaktiviert ausgezeichnet werden.
Ein Wechselschalter kann mit aria-required als Pflichtfeld ausgezeichnet werden. Dies ist nur in Fällen sinnvoll, in denen der Wechselschalter im Status „An“ (aria-checked=true) abgesendet werden muss. Wenn hingegen in einer Gruppe von Wechselschaltern mindestens einer ausgewählt werden muss, sollte die Pflichtfeldkennzeichnung bei der Gruppe vorgenommen werden (z. B. Stern innerhalb der Gruppenbeschriftung).
Der Status des Wechselschalters sollte in Textform angezeigt werden, weil Farbinformationen (wie z. B. grün = an und rot = aus) für sehbeeinträchtigte Menschen ggf. nicht wahrnehmbar sind.
Der Wechselschalter sollte nur für den Status „an“ und „aus“ verwendet werden, weil andere Status-Informationen vom Screenreader nicht übermittelt werden. Alternativ sollten andere Statusinformationen als Teil der Beschriftung oder Beschreibung übermittelt werden. In diesem Fall sollte jedoch beachtet werden, dass zusätzlich der programmatische Status ausgegeben wird, was zu einer redundanten Ausgabe führt.
Die Darstellung des Wechselschalters sollte im Hochkontrast-Modus von Windows überprüft werden. So sollte der Wechselschalter selbst und der visuelle Indikator für den Status einen Rahmen besitzen und nicht nur per Hintergrundfarbe gekennzeichnet sein.
Der sichtbare Wechselschalter und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.

Weitere Informationen: switch role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), Switch Pattern | APG | WAI | W3C

Datum:: 5.10.2023
Lizenz:: CC-BY-SA 4.0
Version:: 0.5

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!