Back to home

Testing aria-valuetext

aria-valuetext lets a range-type control (such as a slider, spinbutton, or progress bar) announce a human-readable value instead of the raw number. Both examples below use the native <progress> element, which has an implicit role of progressbar and supports this attribute.

Example 1: without aria-valuetext

This progress bar has no aria-valuetext, so its value should be announced using the numeric value computed from value and max.

75%

Expected result: the accessible value should be announced as a number or percentage (e.g. "75 percent"), derived from value="75" and max="100".

HTML markup 
<label for="volume1">Volume level</label>
<progress id="volume1" value="75" max="100">75%</progress>

Example 2: with aria-valuetext

This progress bar has the same underlying value as Example 1, but adds aria-valuetext. The custom text should override the numeric announcement.

75%

Expected result: according to the ARIA specification, the accessible value should be presented as “Loud” instead of the number or percentage value.

“If aria-valuetext is specified, assistive technologies SHOULD render that value instead of the value of aria-valuenow.”

aria-valuetext property

HTML markup 
<label for="volume2">Volume level</label>
<progress
  id="volume2"
  value="75"
  max="100"
  aria-valuetext="Loud"
>75%</progress>

Example 3: custom role="progressbar" with aria-valuenow

Examples 1 and 2 use the native <progress> element, where the browser computes the accessible value from the value and max attributes. This example instead uses a custom widget built from a <div> with role="progressbar", where aria-valuenow, aria-valuemin, and aria-valuemax are authored directly. This isolates whether assistive technology handles aria-valuetext differently for native elements versus custom ARIA widgets.

Volume level

Expected result: as with Example 2, the accessible value should be presented as “Loud” instead of the number or percentage value. Comparing results here against Example 2 shows whether a valuetext bug is specific to native elements, or applies to ARIA valuetext handling more broadly.

HTML markup 
<span id="volume3-label">Volume level</span>
<div
  role="progressbar"
  aria-labelledby="volume3-label"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="75"
  aria-valuetext="Loud"
></div>

Back to home