- 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
Consider a car-rental site's checkout flow: progress bars as styled divs without role="progressbar" + values.
Why it matters
Screen-reader and voice-control users who can operate only what the accessibility tree exposes. On a car-rental site's checkout flow, that means they can't complete the task without extra help.
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).
Outcome
With the fix in place on a car-rental site's checkout flow, they get the same outcome as everyone else.
Who is affected
Screen-reader and voice-control users who can operate only what the accessibility tree exposes.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Custom Dropdown or Slider With No Accessibility API Support
- Content Changes That Never Update Their Accessible Name
- Scripted Link or Button With No Real Role or Keyboard Support
- Clickable Div Turned Into a Control but Given No ARIA Role
- Form Field With No Programmatic Label at All
- Assistive Technology Never Told Which Element Currently Has Focus