Radio inputs with the same name attribute value must be part of a group

Log in (Premium content) Request a demo

Rule Description

Radio buttons that relate to each other must have a common label.

The Algorithm, in Simple Terms

Ensures that radio button groups have a common label.

Why this is Important

It is often easy for sighted users to understand the purpose of a group of radio buttons based on context. This is not the case for screen reader users. Grouping buttons together programmatically under a clear, descriptive name eliminates the ambiguity screen reader users experience to create a more accessible product.

How to Fix the Problem

Ensure all related radio buttons are grouped together using:

  • <fieldset> and <legend> tags
  • ARIA groups role="group" or role="radiogroup" and aria-label or aria-labelledby
  • aria-labelledby that points to the same element for every radio button in the group

Compliance Data & User Impact

User Impact: Critical
Disabilities Affected:
  • Blindness
  • Deafblindness
  • Mobility/Dexterity
Issue Type:
  • Deque Best Practice
WCAG Success Criteria:
  • Not applicable
Section 508 Guidelines:
  • Not applicable

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
  • ARIA
Relevant Custom Widget Type(s):
  • Radio Button/Radio Group (ARIA)
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: radiogroup