Schalter

Synonyme: Schaltfläche, Befehlsschaltfläche, Button, Push Button

Siehe auch: Menüschaltfläche, Link, Umschalter, Wechselschalter, Registerkarte, Akkordeon

Schalter dienen der Ausführung eines Befehls (siehe DIN EN ISO 9241-161: 8.32).

Ein Schalter besitzt eine textliche oder grafische Beschriftung sowie einen visuellen Indikator, um den Schalter als solchen kenntlich zu machen. Als visueller Indikator für Schalter wird meist ein Rahmen verwendet.

Schalter können innerhalb anderer Elemente verwendet werden, z. B. in Tabellen, Baumstrukturen, Werkzeugleisten, Scrollbalken, Karteireitern von Registerkarten, Akkordeons, Eingabefeldern, Drehfeldern, Ausklapplisten und kombinierten Eingabefeldern. Abweichende Anforderungen an die Schalter werden in den Abschitten zu diesen Elementen beschrieben.

• JAWS: [Beschriftung] Schalter [Hinweis zur Bedienung mit der Eingabetaste]
• NVDA: [Beschriftung] Schalter | Grafik Schalter
• Windows Sprachausgabe: [Beschriftung] Schaltfläche

Hinweise:

• Der Schaltertyp (type=reset, type=submit, type=button) ist mit den Screenreadern nicht wahrnehmbar.
• Lediglich NVDA gibt das Element <input type=image> als „Grafik Schalter“ aus.

Der Schalter sollte mit den HTML-Elementen <button> oder <input type=button> umgesetzt werden. Für grafische Schalter kann <input type=image> verwendet werden. In Formularen können für die Schalter zum Absenden und Zurücksetzen der Eingaben außerdem <input type=submit> bzw. <input type=reset> verwendet werden.

Beschriftung:

• Die Beschriftung der Schalter, die mit <button> ausgezeichnet sind, sollte über den Textinhalt erfolgen.
• Die Beschriftung der Schalter, die mit <input> ausgezeichnet sind, sollte über das value-Attribut erfolgen.
• Schalter, die mit <input type=submit> oder <input type=reset> ausgezeichnet sind, müssen nicht explizit beschriftet werden, weil sie automatisch durch den Browser beschriftet werden (z. B. mit „Senden“ und „Zurücksetzen“). Die Standard-Beschriftung der Browser kann jedoch mit dem value-Attribut überschrieben werden. Dies wird empfohlen, wenn in der Anwendung oder Hilfe auf diese Schalter Bezug genommen wird, weil je nach Browser die Schalterbeschriftung sonst unterschiedlich ist.
• Bei grafischen Schaltern erfolgt die Beschriftung über den Alternativtext der Grafik (z. B. <input type=image alt=…> bzw. <button><img alt=…></button>) oder per aria-label. Dabei sollte beachtet werden, dass die Schalter-Beschriftung nicht die Grafik beschreibt, sondern den Zweck des Schalters.
• Die Beschriftung der Schalter sollte knapp, eindeutig und aussagekräftig sein. Schalter, die mit „Hier klicken“ oder „Detailansicht“ beschriftet sind, sind nicht aussagekräftig. Die Beschriftung sollte entweder aussagekräftig formuliert werden (z. B. „Detailansicht zu Erika Mustermann“) oder die Beschreibung sollte den Zweck des Schalters erläutern (z. B. per aria-describedby oder title).

Status und Typ:

• Schalter können als deaktiviert (disabled) ausgezeichnet werden.
• Bei Schaltern, die der Navigation oder Paginierung dienen, kann mit aria-current der Schalter ausgezeichnet werden, der auf das aktuelle Element verweist.
• Schalter, die zum Ein- und Ausblenden von Bereichen dienen, sollten mit aria-expanded ausgezeichnet werden, um den Status der Bereiche (ein- oder ausgeblendet) zu übermitteln.
• Schalter, die ein Pop-up öffnen, sollten nicht mit aria-haspopup ausgezeichnet werden, auch wenn das Attribut dafür gedacht ist. Der Grund dafür ist, dass aria-haspopup in Verbindung mit einem Schalter dazu führt, dass das Element als Menü-Schalter ausgegeben wird. Stattdessen sollten Links mit aria-haspopup verwendet werden oder Schalter mit einem textlichen Hinweis in der Beschreibung.

Weitere Informationen: 4.10.6 The button element - HTML Standard (whatwg.org), 4.10.5.1.21 Button state (type=button) - HTML Standard (whatwg.org), 4.10.5.1.19 Image Button state (type=image) - HTML Standard (whatwg.org), 4.10.5.1.18 Submit Button state (type=submit) - HTML Standard (whatwg.org), 4.10.5.1.20 Reset Button state (type=reset) - HTML Standard (whatwg.org)

Wird der Schalter nicht mit dem HTML-Element umgesetzt, sollte zusätzlich zu den Hinweisen zu HTML-Schaltern Folgendes beachtet werden:

• Die Rolle wird mit role=button übermittelt.
• Deaktivierte Schalter können mit aria-disabled ausgezeichnet werden.
• Die Schalter sollten visuell so gekennzeichnet werden (z. B. mit einem Rahmen), damit deren Rolle auch bei Verwendung der Windows-Kontrastanpassung wahrnehmbar ist.

Weitere Informationen: button role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Button Pattern | APG | WAI | W3C

Informationen zu diesem Artikel

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!