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