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="checkbox" onclick="toggle()"></div>

Why it matters

Screen-reader and voice-control users who can operate only what the accessibility tree exposes.

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

Add value settings in code (aria-valuenow/min/max) (and aria-valuetext where useful) plus a name to sliders.

<input type="checkbox" id="opt-1">

<label for="opt-1">Email notifications</label>

A native input exposes its role and checked state automatically; a styled div exposes none of that without a lot of manual ARIA.

Outcome

On an online marketplace's seller dashboard, this barrier is gone for screen-reader and voice-control users who can operate only what the accessibility tree exposes — they reach the same outcome without extra effort.

Who is affected