The aria-valuenow attribute defines the current value for range widgets. It is similar to the value attribute of <progress>, <meter>, and <input> of type range, number and all the date-time types.
When creating a range type role, including meter, scrollbar, slider, and spinbutton on a non-semantic element, the aria-valuenow enables defining a current numeric value between the minimum and maximum values. The minimum and maximum values are defined with aria-valuemin and aria-valuemax.
Warning: The range role itself should NOT be used as it is an "abstract". The aria-valuenow attribute is used on all of the range roles subtypes.
<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>
Use semantic HTML elements when you can:
<label for="birthyear">What year were you born?</label>
<input type="number" id="birthyear" value="1984" min="1900" max="2021" />
If there is no known value, like when a progress bar is in an indeterminate state, don't set an aria-valuenow attribute.
When there is no aria-valuenow set, no information is implied about a current value.
When used with sliders and spinbuttons, assistive technologies announce the actual value to users.
When used with progressbar and scrollbar, assistive technologies announce the value to users as a percent. When aria-valuemin and aria-valuemax are both defined, the percent value is calculated as a position on the range. Otherwise, the actual value is announced as a percent.
When the value to be announced, either the actual value or the value as a percent, may not be clear to users, the aria-valuetext attribute should be used to provide a user-friendly representation of the value. When set, the valuetext string is announced instead of the valuenow numeric value. For example, if a slider represents the days of the week, so the day of the week's aria-valuenow is a number, the aria-valuetext property should be set to a string that makes the slider value understandable, such as "Monday".
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3