• 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="progress-track">
  <div class="progress-fill" style="width:66%"></div>
</div>
<span>Step 2 of 3</span>
<!-- the fill div has no role, and nothing ties the visual bar to the "Step 2 of 3" text -->

Why it matters

A screen reader user hears the loose text "Step 2 of 3" with no indication it's a progress indicator, and gets no percentage.

How to test

Inspect a progress bar in DevTools: check for role="progressbar" with aria-valuenow/min/max — missing fails.

How to fix

Put the progressbar role and value attributes on the track element, and keep aria-valuetext synced with the step count.

<div class="progress-track" role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="3" aria-valuetext="Step 2 of 3">
  <div class="progress-fill" style="width:66%"></div>
</div>

Outcome

A renter hears "step 2 of 3" as an actual progress reading, not disconnected page text.

Who is affected

Screen reader users checking out a rental car cannot perceive how far along the checkout process they are.

Learn more

Related scenarios