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

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.

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

Compatibility

TBD: Add support information for common UA and AT product combinations

Additional resources