Success Criterion 4.1.2
Conformance level A

Progress Bar Built as a Styled Div With No Real Role

4.1.2 — Name, Role, Value

Scenario

Setting

A car-rental site's checkout flow

What’s wrong

Progress bars as styled divs without role="progressbar" + values.

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 progress bar in DevTools: check for role="progressbar" with aria-valuenow/min/max — missing fails.

How to fix

Use role='progressbar' with value settings in code (aria-valuenow/min/max) (or a native progress element).

<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 a car-rental site's checkout flow, this barrier is gone for screen-reader and voice-control users who can operate only what the accessibility tree exposes — they get the same result as anyone else here.

Who is affected