ARIA roles that don't exist or are incomplete

A role tells assistive technology what an element is: role="checkbox" on a <div> makes a screen reader say "checkbox". That is a promise, and a broken one is worse than none. A misspelt or invented role (role="buton", role="dropdown") is ignored, so the element goes back to being an anonymous <div>. A role without the state it depends on is announced and then can't be used: a checkbox with no aria-checked never says whether it is ticked.

The first rule of ARIA is not to use it when HTML already has the element: <button>, <input type="checkbox"> and <select> come with their roles, states and keyboard behaviour built in, and can't get any of this wrong.

We check roles against WAI-ARIA 1.2 and the attributes it marks as required. We don't check that the states are kept up to date by your scripts: that takes a person and a screen reader.

Sources: WCAG 2.2, 4.1.2 Name, Role, Value (Level A); WAI-ARIA 1.2: role definitions; Using ARIA: the first rule.

Best, use the HTML element and delete the role:

<input type="checkbox" id="terms"> <label for="terms">I agree</label>

If it has to be a custom control, give the role what it requires and keep it true from your script:

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