Radio button is missing role declaration

Radio button is missing role declaration — rule summary

Field	Value
Rule code	Manual_RadioRole_Missing
WCAG conformance level	A
WCAG success criterion	4.1.2 Name, Role, Value
Must be fixed at source	No

Description

We detected a radio button element that is missing the appropriate ARIA role declaration. Radio buttons require a role="radio" attribute when custom controls are used instead of native HTML radio inputs. Without the proper role attribute, assistive technologies cannot identify the element as a radio button, making it inaccessible to users who rely on screen readers and other assistive technologies.

How to fix

Add role="radio" to custom radio button elements. For best accessibility support, use the native <input type="radio"> element when possible. If using custom controls, ensure they have the appropriate role attribute and are properly grouped.

<!-- Using native HTML -->
<input type="radio" id="option1" name="group" value="option1">
<label for="option1">Option 1</label>

<!-- Using custom elements with ARIA -->
<div role="radio" aria-checked="false" tabindex="0" id="custom-radio"></div>
<label id="custom-label" for="custom-radio">Custom Option</label>