About This HTML Issue
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>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.