aria-state-with-no-role

This fails the run. Where it is wrong about your code, // ramonda-check-ignore <reason> on the line says so, and the reason is printed on every run.

Reported when an aria-* belonging to a role is written on an element that has no role.

ARIA has two kinds of attribute. A GLOBAL one — aria-label, aria-hidden, aria-describedby — works on anything. Every other one is defined BY a role and is exposed only where that role supports it.

A <div> and a <span> have no role of their own, so a state written on one has nothing to be a state of. The value is in the DOM, it updates, and no assistive technology ever announces it.

Give the element the role the state belongs to — role="button" for aria-expanded, role="checkbox" for aria-checked, role="option" for aria-selected — and with it the rest of what that role needs: a name, a tab stop, and a keyboard path.

Or use the element that has the role already. <button aria-expanded> needs no role written at all, and arrives focusable and announced without a line being spent on it.

Next

• All rules — the other checks this one runs beside.
• Checking your app — how to run it, and what it proves.