Radio group is missing role declaration

Radio group is missing role declaration — rule summary

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

Description

We detected a set of radio buttons that lack a proper radio group container with the appropriate ARIA role declaration. Radio buttons should be grouped using a container element with role="radiogroup" to indicate their relationship. Without proper grouping, screen reader users may not understand which radio buttons are related, making it difficult to comprehend the available options as a coherent set of choices.

How to fix

Wrap related radio buttons in a container element with role="radiogroup" and provide a descriptive aria-labelledby or aria-label attribute to identify the purpose of the group. For native HTML radio inputs, use the same "name" attribute to create a logical group.

<!-- Using native HTML with fieldset/legend -->
<fieldset>
  <legend>Select your preferred contact method:</legend>
  <div>
    <input type="radio" id="email" name="contact" value="email">
    <label for="email">Email</label>
  </div>
  <div>
    <input type="radio" id="phone" name="contact" value="phone">
    <label for="phone">Phone</label>
  </div>
</fieldset>

<!-- Using ARIA roles for custom radio groups -->
<div role="radiogroup" aria-labelledby="contact-legend">
  <div id="contact-legend">Select your preferred contact method:</div>
  <div role="radio" aria-checked="false" tabindex="0" id="email"></div>
  <label for="email">Email</label>
  <div role="radio" aria-checked="false" tabindex="0" id="phone"></div>
  <label for="phone">Phone</label>
</div>