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

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