# The “aria-checked” attribute must not be used on an “input” element which has a “type” attribute whose value is “radio”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-aria-checked-attribute-must-not-be-used-on-an-input-element-which-has-a-type-attribute-whose-value-is-radio
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-checked` attribute is redundant on `<input type="radio">` because the browser already exposes the checked state to assistive technologies through the native `checked` property.

Radio inputs have built-in semantics that map directly to the `aria-checked` state. When a radio button is selected, the browser automatically communicates that state to the accessibility tree. Adding `aria-checked` manually creates a conflict: the attribute could fall out of sync with the actual checked state, and it overrides the native semantics that assistive technologies already understand.

The ARIA in HTML specification explicitly prohibits `aria-checked` on `<input type="radio">`. This falls under the general principle of not using ARIA attributes to duplicate what HTML already provides natively.

If you need to create custom styled radio buttons that don't use native `<input>` elements, then `aria-checked` belongs on an element with `role="radio"`. But when using a standard `<input type="radio">`, the `checked` attribute (or the DOM property) is all you need.

## Invalid example

```html
<label>
  <input type="radio" name="color" value="red" aria-checked="true" checked>
  Red
</label>
<label>
  <input type="radio" name="color" value="blue" aria-checked="false">
  Blue
</label>
```

## Valid example

Remove `aria-checked` and rely on the native `checked` attribute:

```html
<label>
  <input type="radio" name="color" value="red" checked>
  Red
</label>
<label>
  <input type="radio" name="color" value="blue">
  Blue
</label>
```

If you need a custom radio group without native inputs, use `role="radio"` with `aria-checked`:

```html
<div role="radiogroup" aria-label="Color">
  <span role="radio" aria-checked="true" tabindex="0">Red</span>
  <span role="radio" aria-checked="false" tabindex="-1">Blue</span>
</div>
```