WAI-ARIA: aria-valuetext (Property)

Description

Defines the human readable text alternative of aria-valuenow for a range widget.

This property is used, for example, on a range widget such as a slider or progress bar.

If the aria-valuetext attribute is set, authors SHOULD also set the aria-valuenow attribute, unless that value is unknown (for example, on an indeterminate progressbar).

Authors SHOULD only set the aria-valuetext attribute when the rendered value cannot be meaningfully 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 the aria-valuetext would be one of the strings: small, medium, or large. If the aria-valuetext attribute is absent, the 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.

Browser Compatibility For aria-valuetext

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
ariaValueText	ChromeFull support81	EdgeFull support81	FirefoxNo supportNo	Internet ExplorerNo supportNo	OperaFull support68	SafariFull support12.1	WebView AndroidFull support81	Chrome AndroidFull support81	Firefox for AndroidNo supportNo	Opera AndroidFull support58	Safari on iOSFull support12.2	Samsung InternetFull support13.0

Example

HTML Example

Slider: A user input where the user selects a value from within a given range.

• aria-valuenow: Defines the current value for a range widget.
• aria-valuemin: Defines the minimum allowed value for a range widget.
• aria-valuemax: Defines the maximum allowed value for a range widget.
• aria-valuetext: Defines the human readable text alternative of aria-valuenow for a range widget.

<div 
role=”slider”
aria-valuenow=”1″
aria-valuemin=”1″
aria-valuemax=”7″
aria-valuetext=”Sunday”>
</div>

Characteristics

Used in Roles

• range
• separator

Inherits into Roles

• progressbar
• scrollbar
• slider
• spinbutton

Value

• string
  • Unconstrained value type.

Semantic HTML

No HTML element equivalent.

Reference

• W3C (opens new window)
• MDN Web Docs