<fieldset> + <legend>: group related fields

When a form has multiple sections

<form>
  <fieldset>
    <legend>Account</legend>
    <label>Email <input type="email" name="email" /></label>
    <label>Password <input type="password" name="password" /></label>
  </fieldset>

  <fieldset>
    <legend>Profile</legend>
    <label>Display name <input name="display_name" /></label>
    <label>Bio <textarea name="bio"></textarea></label>
  </fieldset>
</form>

<fieldset> semantically groups inputs. <legend> is the group's caption. Browsers render a subtle border + legend label — easy to style or remove.

Why screen readers care

When the user moves into the fieldset, the screen reader announces the legend ONCE, then each input's own label. So "Account. Email edit text. Password edit text. Profile. Display name edit text. …" — context that helps the user understand which section they're in.

Especially valuable for radio groups

<fieldset>
  <legend>Billing cycle</legend>
  <label><input type="radio" name="cycle" value="monthly" /> Monthly</label>
  <label><input type="radio" name="cycle" value="yearly" /> Yearly</label>
</fieldset>

Without the fieldset+legend, "Billing cycle" isn't announced by screen readers and the user hears just "Monthly. Yearly." with no context.

Default styling — remove or restyle

Default browser style is an ugly inset border. Modern designs usually:

fieldset { border: none; padding: 0; margin: 0; }
legend { font-weight: bold; margin-bottom: 8px; }