Back to home

Testing aria-valuenow

aria-valuenow defines the current numeric value of a range widget. This page focuses on the raw number itself. For overriding that number with custom, human-readable text (for example, announcing "Loud" instead of "75"), see the aria-valuetext testing page.

Example 1: Native <progress>, updated by a separate control

The button below is a separate element from the progress bar, focus stays on the button when it is activated, it never moves to the progress bar itself. Because of this, the progress bar's value change needs an explicit aria-live="polite" region to be announced, the browser will not announce it automatically just because the value changed.

0%
0%

Expected result: the visible and native value should update with each click, and the aria-live="polite" region should cause the new percentage to be announced, even though focus remains on the button throughout.

HTML markup 
<progress id="native-progress" value="0" max="100">0%</progress>
<button type="button" id="native-increase">Download 10% more</button>
<span aria-live="polite" id="native-progress-display">0%</span>

Example 2: Custom slider, focused and self-updating

Unlike Example 1, this slider is the element the user is actually interacting with directly, focus stays on it the whole time. Because the focused element's own value is changing, this relies on the widget role's built-in behaviour, not a separate aria-live region, to be announced. Use Arrow Up / Arrow Down to change the value, or the buttons below.

Volume
50

Expected result: worth confirming directly, when the slider is focused and its value changes, most screen readers should announce the new aria-valuenow automatically, without needing a separate live region. This is a behaviour of the focused widget role itself, not something to assume without testing.

HTML markup 
<div
  role="slider"
  aria-labelledby="volume-label"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="50"
  tabindex="0"
>50</div>

Note for testing: confirm both announcement mechanisms above with your standard browser and screen reader combinations. In particular, verify whether Example 2 genuinely needs no aria-live region, or whether some combinations require one even when the slider itself is focused, this has not been verified here.

Back to home