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).
Darstellung
Permalink zu "Darstellung"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 629 | Kontrast | Der Text im Drehfeld muss zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 aufweisen. | Muss | EN 301 549: 9.1.4.3, 11.1.4.3 |
| 630 | Kontrast | Der Rahmen des Drehfeldes muss zum Hintergrund ein Kontrastverhältnis von mindestens 3:1 aufweisen. | Muss | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 631 | Kontrast | Die Pfeil-Icons zur Auswahl des vorhergehenden und des folgenden Werts müssen zur benachbarten Farbe ein Kontrastverhältnis von mindestens 3:1 aufweisen. | Muss | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 632 | Beschriftung | Das Drehfeld muss eine sichtbare Beschriftung besitzen (siehe Beschriftung). | Muss | EN 301 549 9.3.3.2, 11.3.3.2 |
| 633 | Fokussichtbarkeit | Erhält das Drehfeld den Tastaturfokus, dann muss der Fokusindikator sichtbar sein (siehe Fokusindikator). | Muss | EN 301 549: 9.2.4.7, 11.2.4.7 |
| 634 | Fokussichtbarkeit | Wenn im Drehfeld die Texteingabe möglich ist, muss der Standard-Textcursor angezeigt werden (siehe Textcursor). | Muss | EN 301 549: 9.2.4.7, 11.2.4.7, 11.5.2.13 |
Bedienung
Permalink zu "Bedienung"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 635 | Tastaturbedienung | Das Drehfeld muss mit der Tastatur erreicht, bedient und verlassen werden können (siehe folgende Tabelle Tastaturbedienung). Hinweis: Die Schalter zur Auswahl des vorhergehenden und des folgenden Werts sollen nicht separat den Tastaturfokus erhalten. | Muss | EN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2 |
| 636 | Aktualisierungen | Bei Fokussierung und Bedienung des Drehfeldes darf keine unerwartete Kontextänderung erfolgen. | Muss | EN 301 549: 9.3.2.1, 11.3.2.1 und 9.3.2.2, 11.3.2.2 |
| 637 | Klickbereich | Wenn kein Wert eingegeben werden kann, sollen der Klickbereich der Schalter zur Auswahl des vorhergehenden und des folgenden Werts mindestens 24 x 24 px betragen (siehe Zeigeinstrumentbedienung). | Soll | WCAG 2.2 |
Tastaturbedienung Drehfeld
Permalink zu "Tastaturbedienung Drehfeld"| Aktion | Taste | Klassifizierung |
|---|---|---|
| Fokussieren des Drehfeldes | TAB | Erforderlich |
| Verlassen des Drehfeldes | TAB | Erforderlich |
| Eingabe eines Werts im Eingabefeld | Texteingabe | Erforderlich (sofern Texteingabe möglich) |
| Navigation im Eingabefeld | PFEIL RECHTS/LINKS POS1, ENDE | Erforderlich (sofern Texteingabe möglich) |
| Bedienung des Drehfeldes (Auswahl des vorhergehenden oder folgenden Werts) | PFEIL AUF, PFEIL AB | Erforderlich |
| Bedienung des Drehfeldes (Auswahl eines Werts davor oder danach mit fest definierter Schrittweite) | BILD AUF, BILD AB Hinweis: Die Schrittweite hängt von der Anzahl der möglichen Werte ab. Bei 100 Werten wäre z. B. eine Schrittweite von 10 sinnvoll. | Empfohlen |
| Bedienung des Drehfeldes (Auswahl des ersten und letzten Werts) | POS1, ENDE | Empfohlen (sofern keine Texteingabe möglich ist und ein Wertebereich existiert) |
Zeigeinstrumentbedienung Drehfeld
Permalink zu "Zeigeinstrumentbedienung Drehfeld"| Aktion | Taste | Klassifizierung |
|---|---|---|
| Fokus an eine bestimmte Position ins Eingabefeld setzen | Linksklick in das Eingabefeld | Erforderlich (sofern Texteingabe möglich) |
| Vorhergehenden oder folgenden Wert auswählen | Linksklick auf den entsprechenden Schalter mit dem Pfeil-Icon | Erforderlich |
Programmierung/Schnittstellen
Permalink zu "Programmierung/Schnittstellen"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 638 | Rolle | Die Rolle Drehfeld 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 |
| 639 | Wert | Der Wert des Drehfeldes 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 |
| 640 | Des: Wertebereich | Wenn das Drehfeld einen Minimal- und Maximalwert besitzt, müssen diese an die Accessibility API übermittelt werden (siehe Accessibility API). | Muss | EN 301 549: 11.5.2.7 |
| 641 | Status | Der Status des Drehfeldes muss an die Accessibility API übermittelt werden (siehe Elementstatus). Hinweis: Dies bezieht sich auch auf den Status „Texteingabe möglich“ oder „Texteingabe nicht möglich“. | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 642 | Name | Das Drehfeld muss einen knappen und aussagekräftigen Accessible Name besitzen. | Muss | EN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5, 11.5.2.8 |
| 643 | Name | Sofern das Drehfeld eine Beschreibung besitzt, muss diese als Accessible Description übermittelt werden. | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 644 | Bedienung | Das Drehfeld muss mit Assistenztechnologie erreicht, bedient und verlassen werden können (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17 |
| 645 | Aktualisierung | Aktualisierungen hinsichtlich des Accessible Names, Werts oder Status des Drehfeldes müssen an die Accessibility API übermittelt werden (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15 |
| 646 | Desktop: Position | Größe und Position des Drehfeldes müssen an die Accessibility API übermittelt werden (siehe Fokusindikator). | Muss | EN 301 549: 11.5.2.5 |
| 647 | Desktop: Position | Wenn das Eingabefeld nicht schreibgeschützt ist, muss die Position des Textcursors im Eingabefeld an die Accessibility API übermittelt werden (siehe Fokussichtbarkeit) | Muss | EN 301 549: 11.5.2.13 |
Praxistipp Drehfeld in Web-Anwendungen
Permalink zu "Praxistipp Drehfeld in Web-Anwendungen"Screenreader-Ausgabe
Permalink zu "Screenreader-Ausgabe"- 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
spinbuttonan 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-labeloderaria-labelledbyerfolgen. Befindet sich die ARIA-Rollespinbuttonan einem HTML-Eingabefeld, kann dieses auch per<label for=ID>beschriftet werden. - Der aktuelle Wert muss mit
aria-valuenowangegeben werden. Befindet sich die ARIA-Rollespinbuttonan einem HTML-Eingabefeld, wird dessen Wert als aktueller Wert des Drehfeldes verwendet. - Mit
aria-valuetextkann zusätzlich ein Wert in Textform angegeben werden, der dann von der Assistenztechnologie anstelle des Werts imaria-valuenowausgegeben werden soll. - Der minimale und der maximale Wert können mit
aria-valueminundaria-valuemaxangegeben werden. - Die Angabe einer Schrittweite ist bei ARIA-Drehfeldern nicht möglich.
- Das Drehfeld kann mit
aria-disabledals deaktiviert und mitaria-readonlyals 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