Use fieldset to add context to your forms

When filling out a form with related fields, sighted users can visually group things. The shipping address section looks distinct from the billing section. Credit card fields are clearly separate from contact information.

Screen reader users don’t get that visual layout. They hear fields announced one at a time with no context about how they relate to each other. “Street address” means nothing without knowing whether it’s for shipping or billing.

That’s what <fieldset> solves. It groups related form inputs and provides context through the <legend> element. Screen readers announce the legend with each field in the group, so users understand the relationship.

When to use fieldset

Radio button groups require fieldset. Without it, screen readers can’t properly announce the question. Instead of hearing “Shipping method: Standard ground,” users just hear “Standard ground” with no context.

<fieldset>
  <legend>Shipping method</legend>
  <input type="radio" id="standard" name="shipping">
  <label for="standard">Standard ground</label>
  <input type="radio" id="express" name="shipping">
  <label for="express">Express</label>
</fieldset>

Checkbox groups benefit from fieldset when they answer a single question. “Which toppings do you want?” groups multiple checkbox options under one legend.

Related text inputs like address fields, credit card details, or contact information also benefit from grouping.

<fieldset>
  <legend>Billing address</legend>
  <label for="street">Street address</label>
  <input type="text" id="street">
  <label for="city">City</label>
  <input type="text" id="city">
</fieldset>

You can even nest fieldsets when you need more complex grouping. A shipping information fieldset might contain a nested fieldset for the address itself.

<fieldset>
  <legend>Shipping information</legend>
  <fieldset>
    <legend>Address</legend>
    <!-- address fields -->
  </fieldset>
  <fieldset>
    <legend>Delivery options</legend>
    <!-- delivery radio buttons -->
  </fieldset>
</fieldset>

Mistakes to avoid

• Don’t wrap your entire form in a single fieldset. That’s too broad, and the grouping loses meaning.
• Don’t skip fieldset for radio buttons just because you think the context is obvious. Screen readers need the explicit relationship.
• Don’t avoid fieldset because of default browser styling. Yes, the border and padding can be annoying. Strip the styles with CSS, but keep the element.

Context matters

Fieldset gives screen reader users the same contextual grouping that sighted users get from visual layout. Without it, forms that seem clear visually become a disjointed list of fields with no relationship to each other.