Synonyme: Analoges Formularelement, Schieber, Slider, Range slider, Range control
Siehe auch: Drehfeld, Radiobuttons, Ausklappliste, Scrollbalken, Separator, Fortschrittsanzeige
Ein Schieberegler dient der Auswahl eines Wertes aus einem fortlaufenden Wertebereich (siehe DIN EN ISO 9241-161: 8.2). Schieberegler werden vor allem für numerische Werte verwendet.
Ein Schieberegler besteht aus einem Balken, der den gesamten Wertebereich repräsentiert, und einem Anfasser, der den gewählten Wert anzeigt und über den die Wertänderung erfolgt. Schieberegler können zusätzlich beim Balken eine beschriftete oder unbeschriftete Skala mit Werten besitzen. Ein Schieberegler kann vertikal oder horizontal ausgerichtet sein.
Darstellung
Permalink zu "Darstellung"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 741 | Kontrast | Der Balken des Schiebereglers muss zum Hintergrund ein Kontrastverhältnis von mindestens 3:1 aufweisen. | Muss | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 742 | Kontrast | Der Anfasser des Schiebereglers muss zum Hintergrund ein Kontrastverhältnis von mindestens 3:1 aufweisen. | Muss | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 743 | Kontrast | Wenn sich der Anfasser nur innerhalb des Balkens befindet, müssen beide zueinander ein Kontrastverhältnis von mindestens 3:1 aufweisen. Hinweis: Das Kontrastverhältnis von Anfasser und Balken kann auch über einen entsprechenden Rahmen um den Anfasser eingehalten werden. | Muss | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 744 | Kontrast | Alle Textelemente beim Schieberegler (z. B. Anzeige des aktuellen und der möglichen Werte) müssen ein Kontrastverhältnis von mindestens 4,5:1 aufweisen. | Muss | EN 301 549: 9.1.4.3, 11.1.4.3 |
| 745 | Beschriftung | Der Schieberegler muss eine sichtbare Beschriftung besitzen (siehe Beschriftung). Hinweis: Sofern sich der Zweck des Schiebereglers eindeutig aus dem visuellen Kontext ergibt, kann auf die Beschriftung verzichtet werden. Dies gilt z. B. für Schieberegler, die der zeitlichen Steuerung von Videos dienen. | Muss | EN 301 549 9.3.3.2, 11.3.3.2 |
| 746 | Fokussichtbarkeit | Erhält der Schieberegler den Tastaturfokus, dann muss der Fokusindikator sichtbar sein (siehe Fokusindikator). | Muss | EN 301 549: 9.2.4.7, 11.2.4.7 |
| 747 | Wert | Der aktuelle Wert des Schiebereglers soll visuell in Textform wahrnehmbar sein. | Soll | DIN EN ISO 9241-161: 8.2.2 |
Bedienung
Permalink zu "Bedienung"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 748 | Tastaturbedienung | Der Schieberegler muss mit der Tastatur erreicht, bedient und verlassen werden können (siehe folgende Tabelle Tastaturbedienung). | Muss | EN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2 |
| 749 | Zeige-Instrumentbedienung | Die Zeigeinstrument-Bedienung des Schiebereglers darf nicht komplex sein. d. h. wenn die Wertänderung des Schiebereglers nur durch Ziehen des Anfassers möglich ist, muss die Wertänderung auch möglich sein, wenn sich das Zeigeinstrument nicht mehr auf dem Balken befindet. Hinweis 1: Komplexe Zeigeinstrumentbedienung ist
Hinweis 2: Der Schieberegler kann mit einem Eingabefeld oder Drehfeld kombiniert werden, um eine alternative Methode zur Wertauswahl anzubieten, die keine komplexe Zeigeinstrument-Bedienung erfordert. In diesem Fall muss der aktuelle Wert bei beiden Formularelementen automatisch synchronisiert werden. | Muss | EN 301 549: 9.2.5.1, 11.2.5.1 |
| 750 | Zeige-Instrumentbedienung | Der Schieberegler soll auch ohne ziehende Zeigeinstrumentbedienung bedient werden können. Hinweis: Das kann z. B. erreicht werden, indem die Wertauswahl über Klick auf den Balken ermöglicht wird. | Soll | WCAG 2.2 |
| 751 | Aktualisierungen | Bei Fokussierung und Bedienung des Schiebereglers darf keine unerwartete Kontextänderung erfolgen. | Muss | EN 301 549: 9.3.2.1, 11.3.2.1, 9.3.2.2, 11.3.2.2 |
| 752 | Klickbereich | Der Klickbereich des Anfassers des Schiebereglers soll mindestens 24 x 24 px betragen (siehe Zeigeinstrumentbedienung). | Soll | WCAG 2.2 |
| 753 | Klickbereich | Schieberegler sollen nur verwendet werden, wenn die Eingabe eines exakten Werts nicht erforderlich ist. Alternativ soll der Schieberegler so gestaltet werden, dass die einzelnen auswählbaren Werte einen Abstand von mindestens 24 px besitzen. | Soll | WCAG 2.2 |
Tastaturbedienung Schieberegler
Permalink zu "Tastaturbedienung Schieberegler"| Aktion | Taste | Klassifizierung |
|---|---|---|
| Fokussieren des Schiebereglers | TAB | Erforderlich |
| Verlassen des Schiebereglers | TAB | Erforderlich |
| Bedienung der Schiebereglers (Auswahl des vorhergehenden oder folgenden Werts) | PFEIL AB/LINKS, PFEIL AUF/RECHTS Hinweis: Unabhängig von der Ausrichtung sollen je Richtung jeweils zwei Pfeiltasten funktionieren, weil die Ausrichtung häufig mit AT nicht korrekt wahrnehmbar ist. | Erforderlich |
| Bedienung der Schiebereglers (Auswahl des ersten und letzten Werts) | POS1, ENDE | Erforderlich |
| Bedienung der Schiebereglers (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 |
Zeigeinstrumentbedienung Schieberegler
Permalink zu "Zeigeinstrumentbedienung Schieberegler"| Aktion | Taste | Klassifizierung |
|---|---|---|
| Wertänderung | Ziehen des Anfassers (Drag & Drop) | Erforderlich |
| Wertänderung | Linksklick auf einen Bereich des Balkens | Empfohlen |
Programmierung/Schnittstellen
Permalink zu "Programmierung/Schnittstellen"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 754 | Rolle | Die Rolle des Schiebereglers 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 |
| 755 | Wert | Der Wert des Schiebereglers 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 |
| 756 | Desktop: Wertebereich | Minimal- und Maximalwert des Schiebereglers müssen an die Accessibility API übermittelt werden (siehe Accessibility API). | Muss | EN 301 549: 11.5.2.7 |
| 757 | Status | Der Status des Schiebereglers muss an die Accessibility API übermittelt werden (siehe Elementstatus). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |
| 758 | Ausrichtung | Die Ausrichtung des Schiebereglers (vertikal oder horizontal) muss an die Accessibility API übermittelt werden. | Muss | EN 301 549: 9.4.1.2, 11.4.1.2 |
| 759 | Name | Der Schieberegler muss einen knappen und aussagekräftigen Accessible Name besitzen. | Muss | EN 301 549: 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 |
| 760 | Name | Sofern der Schieberegler 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 |
| 761 | Bedienung | Der Schieberegler 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 |
| 762 | Aktualisierung | Aktualisierungen hinsichtlich des Accessible Names, Werts oder Status des Schiebereglers 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 |
| 763 | Desktop: Position | Größe und Position des Schiebereglers und des Anfassers müssen an die Accessibility API übermittelt werden (siehe Fokusindikator). | Muss | EN 301 549: 11.5.2.5, 11.5.2.13 |
Praxistipp Schieberegler in Web-Anwendungen
Permalink zu "Praxistipp Schieberegler in Web-Anwendungen"Screenreader-Ausgabe
Permalink zu "Screenreader-Ausgabe"- JAWS: [Beschriftung] Auf ab Schieber | Links Rechts Schieber [Wert] [Hinweis zur Bedienung mit den Pfeiltasten]
- NVDA: [Beschriftung] Schieber [Wert]
- Windows Sprachausgabe: [Beschriftung] Schieberegler bei [Wert] Aktueller Wert [Wert] Mindestwert [minimaler Wert] Höchstwert [maximaler Wert]
Ein Schieberegler sollte mit dem HTML-Element <input type=range> umgesetzt werden.
Der initiale Wert kann mit dem value-Attribut gesetzt werden.
Minimaler, maximaler Wert und Schrittweite werden mit den Attributen min, max und step gesetzt. Es sollte beachtet werden, dass diese Werte mit vielen Assistenztechnologien nicht wahrnehmbar sind.
Die Beschriftung sollte mit dem Element <label for=ID> mit dem Schieberegler verknüpft werden.
Ein Schieberegler kann als deaktiviert (disabled), aber nicht als schreibgeschützt (readonly) oder als Pflichtfeld (required) ausgezeichnet werden.
Die Ausrichtung des Schiebereglers kann nicht festgelegt werden. Die meisten Browser stellen den Schieberegler horizontal ausgerichtet dar.
Weitere Informationen: 4.10.5.1.13 Range state (type=range) - HTML Standard (whatwg.org)
Achtung: Auf Mobilgeräten kann ein ARIA-Schieberegler mit Assistenztechnologie ggf. nicht bedient werden, weil keine Gesten zur Bedienung nicht-nativer Schieberegler implementiert wurden.
Wird der Schieberegler nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:
- Die Rolle wird mit
role=sliderübermittelt. - Der aktuelle Wert muss mit
aria-valuenowangegeben werden. - Der minimale und der maximale Wert können mit
aria-valueminundaria-valuemaxangegeben. - Die Beschriftung kann per
aria-labeloderaria-labelledbyerfolgen. - Die Darstellung des Schiebereglers sollte im Hochkontrast-Modus von Windows überprüft werden.
- Der sichtbare Schieberegler und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.
In folgenden Punkten unterscheidet sich der ARIA- vom HTML-Schieberegler:
- Eine Schrittweite kann nicht angegeben werden.
- Die Ausrichtung kann mit
aria-orientationangegeben werden. Die Ausrichtung wird von Assistenztechnologie häufig nicht ausgegeben, so dass die Bedienung mit allen Pfeiltasten möglich sein sollte. - Mit
aria-valuetextkann zusätzlich ein Wert in Textform angegeben werden, der dann von der Assistenztechnologie anstelle des Werts imaria-valuenowausgegeben werden soll. - Es können Schieberegler mit mehreren Anfassern umgesetzt werden, um z. B. einen Wertebereich auszuwählen.
- Der Schieberegler kann mit
aria-readonlyals schreibgeschützt ausgezeichnet werden.
Weitere Informationen: slider role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), Slider Pattern | APG | WAI | W3C