Using the aria-valuetext attribute

The aria-valuetext attribute is used to define the human readable text alternative of aria-valuenow for a range widget such as progressbar, spinbutton or slider.

Authors SHOULD only set the aria-valuetext attribute when the rendered value cannot be accurately represented as a number. 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 thearia-valuetext would be one of the strings: small, medium, or large.

Value

String representation of a number

Possible effects on user agents and assistive technology 

If the aria-valuetext attribute is absent, assistive technologies will rely solely on the aria-valuenow attribute for the current value. If aria-valuetext is specified, assistive technologies SHOULD render that value instead of the value of aria-valuenow.

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 for selecting a day of the week. The value of the slider is numeric, and the aria-valuetext attribute is used to provide the name of the day. The application would programmatically update aria-valuetext depending on aria-valuenow.

<div role="slider" aria-valuenow="1" 
	aria-valuemin="1" aria-valuemax="7"
	aria-valuetext="Sunday">

Working Examples:

Notes 

Used With ARIA Roles

Compatibility

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

Additional resources

 

Document Tags and Contributors

 Contributors to this page: smarvin, Fredchat, Sheppy, anastasia
 Last updated by: smarvin,