A range widget value must be within its min and max

Rule range-value-in-bounds · Component patterns (best practice) · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Range widgets (slider, spinbutton, progressbar, meter) expose their current value with aria-valuenow. A value outside the declared aria-valuemin..aria-valuemax range is reported incorrectly to assistive technology.

How to fix#

Keep aria-valuenow within aria-valuemin and aria-valuemax (inclusive) as the value changes.

Example#

<div role="slider" aria-valuenow="120" aria-valuemin="0" aria-valuemax="100">Volume</div>

<div role="slider" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">Volume</div>

Example#

<div role="progressbar" aria-valuenow="130" aria-valuemin="0" aria-valuemax="100">Upload</div>

<div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">Upload</div>

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Slider