• Success Criterion 4.1.2
  • Conformance level A

Custom Slider Missing Its Value, Minimum, or Maximum Settings

4.1.2 — Name, Role, Value

Scenario

Setting

An online marketplace's seller dashboard

What’s wrong

Sliders (role="slider") missing value settings in code (aria-valuenow/min/max) or a name.

Example 

<div class="radius-slider" role="slider" tabindex="0"></div>
<!-- role="slider" is set, but there's no aria-valuenow, aria-valuemin, aria-valuemax, or accessible name -->

Why it matters

A seller using a screen reader hears just "slider" with no current value, so they cannot tell what radius is set.

How to test

Inspect a slider (role="slider") in DevTools: check for aria-valuenow, aria-valuemin, aria-valuemax, and a name — any missing fails.

How to fix

Update aria-valuenow, and aria-valuetext for units, on every keypress or drag that changes the value.

<div class="radius-slider" role="slider" tabindex="0"
     aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
     aria-valuetext="25 miles" aria-label="Shipping radius"></div>

Outcome

A seller hears "shipping radius, 25 miles" and adjusts it without opening a separate settings panel.

Who is affected

Screen reader users adjusting the shipping radius filter get no spoken feedback on the current or possible range.

Learn more

Related scenarios