aria-valuenow

When to use

On any custom widget that represents a value along a range: role="slider", role="progressbar", role="spinbutton", role="scrollbar". The attribute carries the current numeric value. Almost always paired with aria-valuemin and aria-valuemax, which together let the AT compute and announce a percentage and an absolute value.

You usually do not need this on a native <input type="range"> or <progress> — the browser exposes the value automatically. Reach for aria-valuenow when you’ve built the widget from custom markup.

How it behaves

The value is a number (integer or float). The AT announces it as the widget’s current position, often together with a percentage of the way through the min–max range: “Volume, slider, 7 of 10, 70 percent.”

If your widget’s value is more meaningful as a label than as a number — “Friday” on a day-picker slider, “Medium” on a three-position selector — provide aria-valuetext with the human-readable label. AT will read aria-valuetext in place of aria-valuenow, while assistive tech that ignores valuetext still has the numeric fallback. Always set both.

For progressbar, you may omit aria-valuenow for indeterminate progress (the spinner case). For slider, the attribute is required.

Common failures

• Setting aria-valuenow without aria-valuemin and aria-valuemax. The AT has no range, so it announces a bare number with no context.
• Updating the visual position via CSS transforms but never updating aria-valuenow. Screen-reader users hear the initial value forever.
• A value outside the min/max range — aria-valuenow="150" when max is 100. AT either clamps or announces it verbatim; either way it’s a bug.
• Forgetting aria-valuetext for non-numeric scales. Users hear “3 of 5” when the scale is really “Low / Medium-Low / Medium / Medium-High / High”.
• Using aria-valuenow on something that isn’t a range widget — a regular button, an icon. The attribute has no effect outside its supported roles.
• Not keeping the keyboard model in sync. The widget must respond to arrow keys, Home, End, Page Up, Page Down — the attribute alone is silent on keyboard support.

Example

<div
  role="slider"
  tabindex="0"
  aria-label="Volume"
  aria-valuemin="0"
  aria-valuemax="10"
  aria-valuenow="7"
  aria-valuetext="7 out of 10"
>
  <div class="slider-thumb" style="left: 70%"></div>
</div>