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

Join our beta testing program!

We're looking for axe-users and front-end web developers to participate in testing some new accessibility tools.

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> 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).

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.

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.

Resources

Refer to the complete list of axe 3.0 rules.