Drehfeld

Synonyme: Drehschalter, Schaltfläche für die schrittweise Weiterschaltung, Spinbutton, Spinner, Spin Control

Siehe auch: Eingabefeld, Schieberegler, Ausklappliste, kombiniertes Eingabefeld, Schalter

Drehfelder ermöglichen die Auswahl eines Werts aus einem Wertebereich mit kontinuierlichen Daten (z. B. Wochentage, Jahre). Ein Drehfeld besteht aus zwei Schaltern, mit denen der vorhergehende und der folgende Wert ausgewählt werden kann, sowie einem Eingabefeld zur Anzeige des Werts. Das Eingabefeld zur Anzeige des Werts kann schreibgeschützt sein oder die direkte Texteingabe erlauben. Der Wertebereich des Drehfeldes kann beschränkt oder unbeschränkt sein, d. h. es kann einen Minimalwert, Maximalwert oder beides besitzen (siehe DIN EN ISO 9241-161: 8.41).

• JAWS: [Beschriftung] Drehfeld [Wert] [Hinweis zur Texteingabe und Bedienung mit den Pfeiltasten]
• NVDA: [Beschriftung] Drehschalter | Drehschalter bearbeitbar [Wert]
• Windows Sprachausgabe: [Beschriftung] Netz | Drehfeld [Wert] Minimum [minimaler Wert] und Maximum [maximaler Wert]

Hinweise:

• Die Windows-Sprachausgabe gibt die HTML-Drehfelder als „Netz“ und die ARIA-Drehfelder als „Drehfeld“ aus.
• Lediglich mit der Windows-Sprachausgabe ist der Mindest- und Höchstwert wahrnehmbar.
• Lediglich mit NVDA ist der Unterschied zwischen Drehfeldern mit und ohne Texteingabe wahrnehmbar.

Das Drehfeld sollte mit dem HTML-Element <input type=number> umgesetzt werden. Der initiale Wert wird über das value-Attribut übermittelt.
Die Schrittweite sowie der Mindest- und Höchstwert können über die Attribute step, min und max übermittelt werden..
Die Beschriftung des Drehfeldes sollte mit dem Element <label for=ID> mit dem Drehfeld verknüpft werden..
Ein Drehfeld kann als deaktiviert (disabled) und als schreibgeschützt (readonly) ausgezeichnet werden. Ein Drehfeld kann mit required als Pflichtfeld ausgezeichnet werden. .
Weitere Informationen: 4.10.5.1.12 Number state (type=number) - HTML Standard (whatwg.org)

Achtung: Auf Mobilgeräten kann ein ARIA-Drehfeld ohne Texteingabe mit Assistenztechnologie ggf. nicht bedient werden, weil keine Gesten zur Bedienung nicht-nativer Drehfelder implementiert wurden. Dies gilt insbesondere, wenn die Schalter zum Erhöhen bzw. Verringern des Werts Kindelemente des Drehfeldes sind.
Darüber hinaus sind mit den meisten Screenreadern die Unterschiede zwischen Drehfeldern mit und ohne Texteingabe nicht wahrnehmbar. Es wird deshalb empfohlen, nur Drehfelder mit der Möglichkeit zur Texteingabe zu implementieren.

Wird das Drehfeld nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Rolle wird mit role=spinbutton übermittelt.
• Wenn sich die Rolle spinbutton an einem Eingabefeld befindet oder an einem Element, welches ein Eingabefeld enthält, handelt es sich um ein Drehfeld mit Texteingabe. Ansonsten handelt es sich um ein Drehfeld ohne Texteingabe.
• Die Beschriftung des Drehfeldes kann per aria-label oder aria-labelledby erfolgen. Befindet sich die ARIA-Rolle spinbutton an einem HTML-Eingabefeld, kann dieses auch per <label for=ID> beschriftet werden.
• Der aktuelle Wert muss mit aria-valuenow angegeben werden. Befindet sich die ARIA-Rolle spinbutton an einem HTML-Eingabefeld, wird dessen Wert als aktueller Wert des Drehfeldes verwendet.
• Mit aria-valuetext kann zusätzlich ein Wert in Textform angegeben werden, der dann von der Assistenztechnologie anstelle des Werts im aria-valuenow ausgegeben werden soll.
• Der minimale und der maximale Wert können mit aria-valuemin und aria-valuemax angegeben werden.
• Die Angabe einer Schrittweite ist bei ARIA-Drehfeldern nicht möglich.
• Das Drehfeld kann mit aria-disabled als deaktiviert und mit aria-readonly als schreibgeschützt ausgezeichnet werden.
• Die Schalter zum Erhöhen bzw. Verringern des Werts sollten nicht separat den Tastaturfokus erhalten.
• Die Darstellung des Drehfeldes sollte im Hochkontrast-Modus von Windows überprüft werden.
• Das sichtbare Drehfeld und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.

Weitere Informationen: spinbutton role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), Spinbutton 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!