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

Notes 

Used With ARIA Roles

Compatibility

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

Additional resources