aria-valuenow

Das Attribut aria-valuenow definiert den aktuellen Wert für ein range-Widget.

Beschreibung

Das Attribut aria-valuenow definiert den aktuellen Wert für range-Widgets. Es ist ähnlich dem value-Attribut von <progress>, <meter> und <input> vom Typ range, number und allen Datums-Zeit-Typen.

Beim Erstellen einer range-Rollen-Typ, einschließlich meter, scrollbar, slider und spinbutton auf einem nicht-semantischen Element, ermöglicht aria-valuenow die Definition eines aktuellen numerischen Wertes zwischen den minimalen und maximalen Werten. Die minimalen und maximalen Werte sind mit aria-valuemin und aria-valuemax definiert.

Warnung: Die Verwendung der range-Rolle selbst sollte NICHT erfolgen, da sie als "abstrakt" gilt. Das Attribut aria-valuenow wird auf allen Untertypen der range-Rollen verwendet.

html
<p id="birthyearLabel">What year were you born?</p>
<div
  role="spinbutton"
  tabindex="-1"
  aria-valuenow="1984"
  aria-valuemin="1900"
  aria-valuemax="2021"
  aria-labelledby="birthyearLabel">
  <span class="value"> 1984 </span>
  <span role="button">
    <span aria-hidden="true">+</span>
    Increment year by 1
  </span>
  <span role="button">
    <span aria-hidden="true">-</span>
    Decrement year by 1
  </span>
</div>

Verwenden Sie semantische HTML-Elemente, wann immer möglich:

html
<label for="birthyear">What year were you born?</label>
<input type="number" id="birthyear" value="1984" min="1900" max="2021" />

Wenn kein bekannter Wert vorhanden ist, wie zum Beispiel wenn eine Fortschrittsanzeige in einem unbestimmten Zustand ist, setzen Sie kein aria-valuenow-Attribut.

Wenn kein aria-valuenow gesetzt ist, wird keine Information über einen aktuellen Wert impliziert.

Wenn es mit Slidern und Spinbuttons verwendet wird, kündigen unterstützende Technologien den tatsächlichen Wert den Benutzern an.

Wenn es mit Fortschrittsbalken und Scrollbalken verwendet wird, kündigen unterstützende Technologien den Wert als Prozentsatz den Benutzern an. Wenn aria-valuemin und aria-valuemax beide definiert sind, wird der Prozentwert als Position auf der Skala berechnet. Andernfalls wird der tatsächliche Wert als Prozentsatz angekündigt.

Wenn der anzukündigende Wert, entweder der tatsächliche Wert oder der Wert als Prozentsatz, möglicherweise nicht klar für die Benutzer ist, sollte das Attribut aria-valuetext verwendet werden, um eine benutzerfreundliche Darstellung des Wertes zu bieten. Wenn gesetzt, wird die valuetext-Zeichenfolge anstelle des valuenow-numerischen Wertes angekündigt. Zum Beispiel, wenn ein Slider die Wochentage darstellt und aria-valuenow der Tag der Woche ist, sollte die aria-valuetext-Eigenschaft auf eine Zeichenfolge gesetzt werden, die den Sliderwert verständlich macht, wie "Montag".

Beispiele

html
<p id="temperatureLabel">Oven Temperature</p>
<div
  role="meter"
  id="temperature"
  aria-valuenow="205"
  aria-valuemin="70"
  aria-valuemax="250"
  aria-labelledby="temperatureLabel">
  <div class="meter-color" aria-hidden="true"></div>
</div>

Die erste Regel bei der Verwendung von ARIA lautet: "Wenn Sie eine native Funktion mit den bereits integrierten Semantiken und Verhaltensweisen verwenden können, anstatt ein Element umzufunktionieren und eine ARIA-Rolle, einen Zustand oder eine Eigenschaft hinzuzufügen, um es zugänglich zu machen, dann tun Sie dies."

html
<label for="temperature">
  Oven Temperature
</p>
<input type="range" id="temperature"
  value="205" min="70" max="250" step="5"/>
</meter>

Wenn wir native HTML-Semantiken mit <input> verwenden, erhalten wir kostenlos Stile und Semantiken.

Werte

<number>

Eine Dezimalzahl, zwischen den minimalen und maximalen Werten.

Zugehörige Schnittstellen

Element.ariaValueNow

Die ariaValueNow-Eigenschaft, Teil der Element-Schnittstelle, spiegelt den Wert des Attributs aria-valuenow wider.

ElementInternals.ariaValueNow

Die ariaValueNow-Eigenschaft, Teil der ElementInternals-Schnittstelle, spiegelt den Wert des Attributs aria-valuenow wider.

Zugehörige Rollen

Verwendet in Rollen:

Geerbt in Rollen:

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# aria-valuenow

Siehe auch