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

Rule ID: radiogroup
Ruleset: axe-core 3.0
User Impact: Critical
WCAG: Best Practice

Overwhelmed by accessibility? We've got you covered.

Join Deque's exclusive beta tester community and help us put the power of creating accessible code at your fingertips - no accessibility expertise required.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Blind
  • Deafblind
  • Mobility

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

Use the following markup to ensure that all groups of radio buttons are clustered together in a container using fieldset and legend elements:

<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 it Matters

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.0 rules.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted: