Standards · ARIA

Rolle Widget

slider

Markiert ein Element als Eingabefeld zur Auswahl eines Werts aus einem Bereich. Zuerst sollte <input type="range"> verwendet werden; role="slider" kommt nur zum Einsatz, wenn ein benutzerdefinierter Track benötigt wird — etwa ein Zweipunkt-Bereichswähler, den native HTML nicht unterstützt.

Verwendung

Es sollte <input type="range"> verwendet werden. Das native Element bietet Tastaturunterstützung, Touch-Gesten, Strichmarkierungen über <datalist> und einen value, der beim Absenden des Formulars übermittelt wird.

role="slider" ist für benutzerdefinierte Steuerelemente vorgesehen, die native HTML nicht abbilden kann:

  • Zweipunkt-Bereichswähler (Preis min/max).
  • Nichtlineare Skalen (logarithmisch, gestufte Farbwähler).
  • Schieberegler mit einer Gestaltung, die das native Element in einem bestimmten Design-System nicht erreichen kann.

Tastatur- und Fokus-Kontrakt

Gemäß dem APG-Slider-Muster:

  • Tab verschiebt den Fokus auf den Slider-Thumb.
  • Pfeil rechts/oben erhöht den Wert um einen Schritt; Pfeil links/unten verringert ihn.
  • Bild auf / Bild ab springen um einen größeren Schritt (typischerweise 10 %).
  • Pos1 springt zu aria-valuemin; Ende springt zu aria-valuemax.

aria-valuenow, aria-valuemin und aria-valuemax MÜSSEN gesetzt werden. Ist der numerische Wert nicht selbsterklärend (z. B. „3“ — drei was?), sollte aria-valuetext="3 Sterne" hinzugefügt werden, damit Screenreader die aussagekräftige Version ankündigen.

Bei Zweipunkt-Schiebereglern sind zwei separate role="slider"-Elemente zu rendern, jedes mit eigenem min/max, das die Position des jeweils anderen Thumbs widerspiegelt.

Häufige Fehler

  • aria-valuenow fehlt beim ersten Rendern. Der Schieberegler hat keinen angekündigten Wert.
  • Slider-Wert wird nach dem Ziehen nicht aktualisiert. Screenreader melden dauerhaft den ursprünglichen Wert.
  • Ein Lautstärke-Schieberegler von 0 bis 100 ohne aria-valuetext — der Nutzer hört „47“ ohne Einheit.
  • Zu grobe Tastaturschritte. Ein 0-100-Schieberegler, der in 10er-Schritten springt, verhindert, dass Screenreader-Nutzende den Wert 53 wählen können.
  • Zweipunkt-Schieberegler als einzelnes Element mit aria-valuetext="20 bis 80" gerendert. Der Nutzer kann keinen der beiden Grenzwerte unabhängig einstellen.

Beispiel

<!-- Bevorzugt -->
<label for="vol">Volume</label>
<input id="vol" type="range" min="0" max="100" value="50">

<!-- Benutzerdefinierter Schieberegler -->
<div id="brightnessLabel">Brightness</div>
<div
  role="slider"
  tabindex="0"
  aria-labelledby="brightnessLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="60"
  aria-valuetext="60 percent"
></div>