HTML Guides for radiogroup

The aria-invalid attribute belongs on the role="radiogroup" element that wraps the options, not on each role="radio" option inside it.

WAI-ARIA 1.2 deprecated aria-invalid as a global state, and future versions will only allow it on the roles that support it: application, checkbox, combobox, gridcell, listbox, radiogroup, slider, spinbutton, textbox and tree, plus the roles that inherit from them. radio isn't on that list. A radio button's validity depends on the whole group. A required choice is either made or missing, and no single option is wrong by itself.

Browsers and screen readers aren't required to expose a state on a role that doesn't support it, so an error set on the options may never reach the user.

The validator flags any element with an explicit role="radio" and an aria-invalid attribute, whatever its value, so aria-invalid="false" triggers the warning too. Native <input type="radio"> elements aren't flagged. To fix it, remove the attribute from every option and set it on the radiogroup container. Point aria-describedby on that container at the error message, so screen readers announce it along with the group's label.

Invalid example

<p id="plan-label">Choose a plan</p>

<div role="radiogroup" aria-labelledby="plan-label">

<div role="radio" aria-checked="false" aria-invalid="true" tabindex="0">Basic</div>

<div role="radio" aria-checked="false" aria-invalid="true" tabindex="-1">Pro</div>

</div>

<p id="plan-error">Select a plan to continue.</p>

Valid example

<p id="plan-label">Choose a plan</p>

<div role="radiogroup" aria-labelledby="plan-label" aria-invalid="true" aria-describedby="plan-error">

<div role="radio" aria-checked="false" tabindex="0">Basic</div>

<div role="radio" aria-checked="false" tabindex="-1">Pro</div>

</div>

<p id="plan-error">Select a plan to continue.</p>