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

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.

When screen reader users arrive at a set of radio buttons, that are related - that is when they all submit values for a single named field - the individual label associated with each radio control may not fully convey the group's descriptive context.

Compliance Data & Impact

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

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

To ensure that all groups of radio buttons are clustered together in a container using <fieldset> and <legend> elements, use these elements as follows:

<fieldset>
    <legend>
        Form input group name
    </legend>
    Input element code
</fieldset>

The <fieldset> element visually groups form elements together by placing a box around them. If you don’t like the appearance of the box, you can easily change it using CSS. To remove the fieldset border, for example, you could apply the following CSS:

fieldset{ border: none;}

It’s best to use the <fieldset> element for smaller number of elements; to group larger numbers of elements, it may be more useful to use a heading.

The <legend> element acts as the title for the group of radio buttons. Like the <fieldset> element, if you don’t like the appearance of the <legend> element, you can use CSS to style it in a different manner, such as in the form of a heading, as in the following CSS example:

legend {
    margin: 0;
    padding: 0;
    font-size: 1.3em;
    font-weight: bold;
}

It is also possible to style the <legend> element in a manner similar to page headings. This creates greater consistency in page design while also ensuring input group titles are announced appropriately (and not as headings).

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