ARIA: aria-valuenow-Attribut

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 Datumszeit-Typen.

Wenn Sie eine Range-Rolle erstellen, einschließlich meter, scrollbar, slider und spinbutton auf einem nicht-sematischen Element, ermöglicht das aria-valuenow die Definition eines aktuellen numerischen Werts zwischen den minimalen und maximalen Werten. Die minimalen und maximalen Werte werden mit aria-valuemin und aria-valuemax definiert.

<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, wenn Sie können:

<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 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 angedeutet.

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

Bei Verwendung mit Fortschrittsbalken und Bildlaufleisten geben unterstützende Technologien den Wert den Benutzern als Prozentsatz an. Wenn aria-valuemin und aria-valuemax beide definiert sind, wird der Prozentsatzwert 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 möglicherweise nicht klar ist, sollte das aria-valuetext-Attribut verwendet werden, um eine benutzerfreundliche Darstellung des Wertes bereitzustellen. Wenn gesetzt, wird die Valuetext-Zeichenfolge anstelle des numerischen valuenow Werts angesagt. Wenn z. B. ein Schieberegler die Wochentage darstellt, sodass der aria-valuenow-Wert der Wochentage eine Zahl ist, sollte die aria-valuetext-Eigenschaft auf einen Text gesetzt werden, der den Wert des Schiebereglers verständlich macht, wie "Montag".

<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 der ARIA-Nutzung ist: "Wenn Sie eine native Funktion mit den bereits integrierten Semantiken und Verhaltensweisen verwenden können, anstatt ein Element für einen anderen Zweck zu verwenden und eine ARIA-Rolle, einen Zustand oder eine Eigenschaft hinzuzufügen, um es zugänglich zu machen, dann tun Sie das."

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

Wenn wir native HTML-Semantik mit <input> verwenden, erhalten wir Styles und Semantik kostenlos.

<number>

Eine Dezimalzahl, zwischen den minimalen und maximalen Werten.

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.

Verwendet in Rollen:

• meter
• scrollbar
• separator
• slider
• spinbutton

Vererbt in Rollen:

• meter
• progressbar
• scrollbar
• slider
• spinbutton

• range Role
• <input type="range>-Element value-Attribut
• aria-valuetext
• aria-valuemax
• aria-valuemin.