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

desktopmobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
ariaValueText

aria-valuetext 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

Inherits into Roles

Value

  • string
    • Unconstrained value type.

Semantic HTML

No HTML element equivalent.

Reference

Leave a Reply

Your email address will not be published. Required fields are marked *