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

Rule ID: radiogroup
Ruleset: axe-core 3.2
User Impact: Critical
WCAG: Best practice

Accessibility Testing Designed for Developers - No Training Required

Join Deque's exclusive beta testing community and help us reach our goal of accessibility as standard part of every sprint by 2022.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Blindness
  • Deafblindness
  • Mobility/Dexterity

Requirement(s)

  • Best Practice

WCAG Success Criteria

  • Not specified or not applicable

Section 508 Guidelines

  • Not specified or not applicable

How to Fix the Problem

Ensure all related radio buttons are grouped together using:

  • fieldset and legend elements
  • 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).

Why this is Important

It is often easy for sighted users to understand the purpose of a group of radio buttons based on context. Screen reader users require announcements and explanations of the currently focused content. Grouping buttons together programmatically under a 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 adequately convey the group's descriptive context.

Rule Description

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

The Algorithm (in simple terms)

Ensures that radio button groups have a common label.

Resources

Refer to the complete list of axe 3.2 rules.