For related form controls that need a shared caption, keep the native <fieldset> and <legend> and style them with CSS. If a real markup constraint prevents using those elements, use a container with role="group" and aria-labelledby pointing to visible group text. If each radio or checkbox already has a clear, descriptive label and no extra group instruction is needed, you may not need a group caption at all.
What do fieldset and legend do?
The <fieldset> groups related form controls; its <legend> identifies that group with a caption. The W3C Web Accessibility Initiative describes the fieldset as a container for related controls and the legend as the heading that identifies the group (W3C WAI Forms Tutorial: Grouping Controls).
This is distinct from labeling each control. A radio button still needs its own label, while the legend supplies shared context—for example, that the options below answer “Preferred contact method.”
Can you style the native elements instead?
Usually, yes. The default border, spacing, and legend placement are presentation, not a reason to replace the semantics. CSS can adjust or remove the border and change the legend’s positioning; both W3C guidance and MDN document styling these elements (W3C H71; MDN: <fieldset>; MDN: <legend>).
#1 Best Overall
<fieldset class="choice-group">
<legend>Preferred contact method</legend>
<label><input type="radio" name="contact" value="email"> Email</label>
<label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>Adapt the CSS to the design while keeping the group caption visible and understandable. Resetting the border, padding, or margin is a styling decision; it does not require replacing the elements.
When is an alternative appropriate?
Use an ARIA group only when a genuine markup constraint prevents native fieldset and legend. W3C documents a group container whose accessible name comes from visible text through aria-labelledby:
<div role="group" aria-labelledby="contact-heading">
<h2 id="contact-heading">Preferred contact method</h2>
<!-- related controls with their own labels -->
</div>This communicates a named group, but it does not reproduce every native fieldset behavior. The HTML Standard specifies, for example, that disabling a fieldset disables descendant form controls except those inside its first legend child, if present (WHATWG HTML Standard: Form elements). Do not add role="group" to an arbitrary wrapper merely to get a CSS box; CSS layout and borders do not need ARIA.
When can you omit group semantics?
A group caption is not necessary for every cluster of inputs. W3C’s H71 guidance says fieldset and legend are not required when related radio or checkbox controls have clear instructions, distinct choices, and sufficiently descriptive individual labels (W3C H71). Avoid adding a legend that merely repeats wording already made clear by each option.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsKeep the legend and control labels clear
Make the legend concise, and write individual labels so they make sense on their own. Assistive technologies differ in whether and how often they announce a legend—potentially with each control, once, or rarely not at all—so essential instructions should not depend on repeated announcement of the legend (W3C WAI Forms Tutorial: Grouping Controls).
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
