This post is also available in: Français (French)
Group related elements in a form by <fieldset> tag + <legend>
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
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.
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. Don’t imbricate fieldset.
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.
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.