Using the aria-valuenow attribute
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
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
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:
String representation of a number
For elements with role
scrollbar, assistive technologies SHOULD render the actual value as a percentage, calculated as a position on the range from
aria-valuemax if both are defined, otherwise the actual value with a percent indicator.
Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.
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">
- WAI-ARIA Authoring Practices: Horizontal Slider Example
- WAI-ARIA Authoring Practices: Horizontal Multi-Thumb Slider Example
- WAI-ARIA Authoring Practices: Slider Examples with aria-orientation and aria-valuetext
- Deque Code Library of Accessibility Examples: Slider
- Deque Code Library of Accessibility Examples: Slider (Multirange)
TBD: Add support information for common UA and AT product combinations