The aria-valuenow attribute is used to define the current value for a range widget such as a slider, spinbutton or progressbar. If the current value is not known, the author should not set the aria-valuenow attribute. If the aria-valuenow has a known minimum and maximum value, authors should set the aria-valuemin and aria-valuemax attributes.
When the rendered value cannot be accurately represented as a number, authors SHOULD use the aria-valuetext attribute in conjunction with aria-valuenow to provide a user-friendly representation of the range's current value. For example, a slider may have rendered values of small, medium, and large. In this case, the values of aria-valuenow could range from 1 through 3, which indicate the position of each value in the value space, but the aria-valuetext would be one of the strings: small, medium, or large.
aria-valuenow is a required attribute of role slider, scrollbar and spinbutton.
Value
String representation of a number
Possible effects on user agents and assistive technology
For elements with role progressbar and scrollbar, assistive technologies SHOULD render the actual value as a percentage, calculated as a position on the range from aria-valuemin to aria-valuemax if both are defined, otherwise the actual value with a percent indicator.
For elements with role slider and spinbutton, assistive technologies SHOULD render the actual value to users.
Examples
Example 1:
The snippet below shows a simple slider with a current value of 4.
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
Working Examples:
Notes
Used With ARIA Roles
- progressbar
- scrollbar
- slider
- spinbutton
Related ARIA techniques
Compatibility
TBD: Add support information for common UA and AT product combinations
Additional resources