Radio button is missing a label

Radio button is missing a label — rule summary

Field	Value
Rule code	Manual_RadioLabel_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 does not have an associated label. Radio buttons must have clear text labels to indicate their purpose. Missing labels make it impossible for screen reader users to understand the purpose of the control and prevent users with mobility impairments from clicking on the label to activate the radio button

How to fix

Ensure all radio buttons have an associated label using either the <label> element with a for attribute matching the radio button's id, or by wrapping the radio button in a label element. Labels should be descriptive and concise.

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

<!-- Wrapping the input in a label -->
<label>
  <input type="radio" name="group" value="option2">
  Option 2
</label>

<!-- Using aria-labelledby (for custom controls) -->
<div role="radio" aria-checked="false" tabindex="0" id="custom-radio" aria-labelledby="custom-label"></div>
<div id="custom-label">Custom Option</div>