role-missing-required-aria

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 explicit role is written without the aria-* its specification requires.

A role says what an element IS, and some roles mean nothing on their own. A div has no checked-ness, no level and no value of its own, so a role claiming one of those has to be given it — aria-checked, aria-level, aria-valuenow.

Nothing fails while this is wrong. The role is real, the missing attribute is simply absent, and the page works for everyone who can see it. What a screen reader announces is a control in a state it cannot report, which is worse than the plain element would have been.

The likeliest fix is not to add the attribute. A native element usually already is the thing the role is claiming — <input type="checkbox">, <h2>, <input type="range"> — and it brings the state, the keyboard behaviour and the focus handling with it, none of which a role provides.

Only an EXPLICIT role is judged: a native element's own role is the host language's, and it supplies what it needs.

Next

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