aria-valuetext attribute defines the human readable text alternative of
aria-valuenow for a range widget.
Numbers — even percentages — aren't always user-friendly. Assistive technologies present
aria-valuenow as numeric values. If a progress bar is at 8%, what does that mean?
aria-valuetext provides a way of presenting the current value in a more user-friendly, human-understandable way. For example, a battery meter value might be conveyed as
aria-valuetext="8% (34 minutes) remaining".
aria-valuetext attribute is used with the
aria-valuenow attribute, not instead of it, unless that value is not known.
aria-valuetext is only needed when the numeric value of
aria-valuenow is not meaningful. For example, a range's values are numeric but may be used for non-numeric values, such as college class level. The values of
aria-valuenow for a 4-year college could range from 1 through 4, which indicate the position of each value in the value space. In this case, the
aria-valuetext could be one of the strings: "first year", "sophomore", "junior", and "senior".
If the numeric value is meaningful, such as a spinner with
aria-valuenow="3" for how many pizza slices you want to order,
aria-valuetext is not needed.
When both the
aria-valuenow are included, the
aria-valuetext is announced. When there is no
aria-valuetext attribute, assistive technologies will announce the
aria-valuenow attribute for the current value.
A human readable text alternative of the
|Accessible Rich Internet Applications (WAI-ARIA) |