Eigenschaft Widget-Zustand

`aria-valuenow`

Aktueller numerischer Wert eines bereichsbasierten Widgets — Schieberegler, Fortschrittsbalken, Drehfeld, Scrollbalken. Zusammen mit aria-valuemin und aria-valuemax angeben, damit assistive Technologie eine aussagekräftige Position ankündigen kann. Für nicht-numerische Beschriftungen aria-valuetext verwenden.

Verwendung

An jedem benutzerdefinierten Widget, das einen Wert entlang eines Bereichs darstellt: role="slider", role="progressbar", role="spinbutton", role="scrollbar". Das Attribut trägt den aktuellen numerischen Wert. Es wird fast immer zusammen mit aria-valuemin und aria-valuemax verwendet, die der assistiven Technologie ermöglichen, einen Prozentwert und einen absoluten Wert zu berechnen und anzukündigen.

Auf einem nativen <input type="range"> oder <progress> wird dieses Attribut in der Regel nicht benötigt — der Browser legt den Wert automatisch offen. aria-valuenow kommt zum Einsatz, wenn das Widget aus benutzerdefiniertem Markup aufgebaut wurde.

Verhalten

Der Wert ist eine Zahl (Ganzzahl oder Fließkommazahl). Die assistive Technologie kündigt ihn als aktuelle Position des Widgets an, oft zusammen mit einem Prozentwert des Wegs durch den Min-Max-Bereich: „Lautstärke, Schieberegler, 7 von 10, 70 Prozent.“

Ist der Wert des Widgets als Beschriftung aussagekräftiger als als Zahl — etwa „Freitag“ an einem Tagesauswahl-Schieberegler oder „Mittel“ an einem Dreipunkt-Selektor — ist aria-valuetext mit der menschenlesbaren Beschriftung bereitzustellen. Die assistive Technologie liest dann aria-valuetext anstelle von aria-valuenow; Hilfstechnologie, die aria-valuetext ignoriert, greift weiterhin auf den numerischen Fallback zurück. Beide Attribute sollten stets gemeinsam gesetzt werden.

Beim progressbar darf aria-valuenow für unbestimmten Fortschritt (den Ladekreisel) weggelassen werden. Beim slider ist das Attribut erforderlich.

Häufige Fehler

aria-valuenow setzen, ohne aria-valuemin und aria-valuemax anzugeben. Die assistive Technologie hat keinen Bezugsrahmen und kündigt eine bloße Zahl ohne Kontext an.
Die visuelle Position über CSS-Transformationen aktualisieren, aria-valuenow jedoch nie nachführen. Screenreader-Nutzende hören dauerhaft den Anfangswert.
Ein Wert außerhalb des Min-Max-Bereichs — etwa aria-valuenow="150" bei einem Maximum von 100. Die assistive Technologie klemmt ihn entweder ab oder kündigt ihn wörtlich an; beides ist ein Fehler.
aria-valuetext für nicht-numerische Skalen vergessen. Nutzende hören „3 von 5“, obwohl die Skala tatsächlich „Niedrig / Mittelniedrig / Mittel / Mittelhoch / Hoch“ lautet.
aria-valuenow an Elementen verwenden, die kein Bereichs-Widget sind — etwa einem einfachen Schalter oder einem Symbol. Das Attribut hat außerhalb seiner unterstützten Rollen keine Wirkung.
Das Tastaturmodell nicht synchron halten. Das Widget muss auf Pfeiltasten, Pos1, Ende, Bild auf, Bild ab reagieren — das Attribut allein regelt keine Tastaturunterstützung.

Beispiel

<div
  role="slider"
  tabindex="0"
  aria-label="Volume"
  aria-valuemin="0"
  aria-valuemax="10"
  aria-valuenow="7"
  aria-valuetext="7 out of 10"
>
  <div class="slider-thumb" style="left: 70%"></div>
</div>