aria-valuenow

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

Beschreibung

Das aria-valuenow-Attribut 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-Rolle, 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 werden mit aria-valuemin und aria-valuemax definiert.

Warnung: Die Rolle range selbst sollte NICHT verwendet werden, da sie eine "abstrakte" Rolle ist. Das aria-valuenow-Attribut wird auf allen Subtypen 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 vorliegt, wie wenn ein Fortschrittsbalken 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 Schiebereglern und Drehknöpfen verwendet wird, geben unterstützende Technologien den tatsächlichen Wert an die Benutzer weiter.

Wenn es mit progressbar und scrollbar verwendet wird, geben unterstützende Technologien den Wert als Prozentsatz an die Benutzer weiter. Wenn aria-valuemin und aria-valuemax beide definiert sind, wird der Prozentwert als Position im Bereich berechnet. Andernfalls wird der tatsächliche Wert als Prozentsatz angegeben.

Wenn der anzusagende Wert, entweder der tatsächliche Wert oder der Wert als Prozentsatz, für die Benutzer nicht klar sein könnte, sollte das aria-valuetext-Attribut verwendet werden, um eine benutzerfreundliche Darstellung des Wertes zu bieten. Wenn gesetzt, wird die valuetext-Zeichenkette anstelle des numerischen valuenow-Wertes angekündigt. Zum Beispiel, wenn ein Schieberegler die Wochentage darstellt, sodass der aria-valuenow-Wert eines Wochentags eine Zahl ist, sollte die aria-valuetext-Eigenschaft auf eine Zeichenkette gesetzt werden, die den Schiebereglerwert 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 ist: "Wenn Sie eine native Funktion mit den benötigten Semantiken und Verhaltensweisen verwenden können, anstatt ein Element umzufunktionieren und ein ARIA-Rolle, -Zustand oder -Eigenschaft hinzuzufügen, um es zugänglich zu machen, dann tun Sie das."

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

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

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 aria-valuenow-Attributs wider.

ElementInternals.ariaValueNow

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

Zugehörige Rollen

Verwendet in Rollen:

Vererbt in Rollen:

Spezifikationen

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

Siehe auch