# The “aria-invalid” attribute should not be used on any element which has “role=radio”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-aria-invalid-attribute-should-not-be-used-on-any-element-which-has-role-radio
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

```html
<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>
```