axe-core rule: aria-required-attr

ARIA roles are missing their required attributes

Fix reference | BarrierScan

What it is

Elements have an ARIA role that requires certain attributes (for example role="slider" requires aria-valuenow), but those attributes are missing, so assistive technology cannot report the widget state.

Who it blocks

Screen reader users get an incomplete widget: a slider with no value, a checkbox with no checked state.

How to fix it

Add the attributes required by the role, and update them from JavaScript as the widget state changes.

Example fix

<!-- Before -->
<div role="slider" aria-label="Volume"></div>

<!-- After -->
<div role="slider" aria-label="Volume"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="60"></div>

This is one of the barrier types BarrierScan checks for on every scan. Request a free accessibility scan to see whether it appears on your site, alongside the rest of the automated findings.