See plans and pricing

Some interactive elements use special ARIA roles, like "checkbox" or "progressbar", that require extra attributes describing their current state. When those required attributes are missing, screen readers can announce the element's role but cannot tell the user its actual state, which makes the element confusing or unusable.

How to fix it

1. Identify the element and its role attribute flagged in the report (e.g. role="checkbox" or role="progressbar").
2. Check which ARIA states or properties that role requires (for example, role="checkbox" requires aria-checked; role="progressbar" requires aria-valuenow, aria-valuemin, and aria-valuemax).
3. Add the missing attribute(s) with an appropriate value, e.g. aria-checked="false" or aria-valuenow="40".
4. Keep the attribute's value in sync with the element's actual state via JavaScript whenever that state changes.
5. Re-test the page to confirm the state is now announced correctly.

<div role="checkbox" tabindex="0">Subscribe</div>

<div role="checkbox" tabindex="0" aria-checked="false">Subscribe</div>

View the full rule reference from Deque University

See plans and pricing