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.
<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:
<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
<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."
<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 derElement
-Schnittstelle, spiegelt den Wert des Attributsaria-valuenow
wider. ElementInternals.ariaValueNow
-
Die
ariaValueNow
-Eigenschaft, Teil derElementInternals
-Schnittstelle, spiegelt den Wert des Attributsaria-valuenow
wider.
Zugehörige Rollen
Verwendet in Rollen:
Geerbt in Rollen:
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # aria-valuenow |