Labels, Fieldsets & Legends

A form is only usable if people know what each field is for. Labels name individual controls, fieldsets and legends name groups of controls, and hint text explains requirements. Getting these right is the single biggest factor in form accessibility.

Two ways to label

Explicit: for on the label matches the control's id. Works wherever the two are in the page.
Implicit: the control sits inside the label. Simpler, and common for checkboxes and radios.

Either way, clicking the label activates the control, and screen readers read the label when the control is focused. Try clicking the words "Remember me".

What not to do

HTML no-label.html

<p>Email</p>
<input name="email" type="email" placeholder="Email">

Text next to a field isn't a label unless it's connected. A screen-reader user tabbing to this field hears only "edit text". The validator flags it, and so would an accessibility audit.

Fieldset and legend

When several controls answer one question, group them in a <fieldset> and give the group a <legend>:

<fieldset>
  <legend>Delivery speed</legend>
  <label><input type="radio" name="speed" value="standard" checked> Standard (3–5 days)</label><br>
  <label><input type="radio" name="speed" value="express"> Express (next day)</label>
</fieldset>

<fieldset>
  <legend>Billing address</legend>
  <p><label for="b-street">Street</label> <input id="b-street" name="b_street" autocomplete="billing address-line1"></p>
  <p><label for="b-city">City</label> <input id="b-city" name="b_city" autocomplete="billing address-level2"></p>
</fieldset>

Result

Screen readers announce the legend when entering the group, so "Express (next day)" is heard as "Delivery speed, Express (next day), radio button". Without it, a lone "Yes" or "No" radio button would be meaningless. Fieldsets are essential for radio groups and checkbox groups, and useful for any related set of fields.

Disabling a group

<label><input type="checkbox" id="gift" checked> This is a gift</label>
<fieldset id="gift-options">
  <legend>Gift options</legend>
  <p><label for="g-msg">Message</label> <input id="g-msg" name="gift_message"></p>
  <p><label><input type="checkbox" name="wrap"> Gift wrap</label></p>
</fieldset>
<script>
  const gift = document.getElementById("gift");
  const options = document.getElementById("gift-options");
  gift.addEventListener("change", () => (options.disabled = !gift.checked));
</script>

Result

Setting disabled on a fieldset disables every control inside it at once. Untick the box to see it.

Hints and error messages

Extra guidance — format requirements, error messages — should be connected to the field with aria-describedby, so screen readers read it after the label:

<p>
  <label for="pw">Password</label><br>
  <input id="pw" name="password" type="password" aria-describedby="pw-hint" minlength="10" autocomplete="new-password">
  <br><small id="pw-hint">At least 10 characters. A passphrase of a few random words works well.</small>
</p>
<p>
  <label for="age">Age</label><br>
  <input id="age" name="age" type="number" aria-invalid="true" aria-describedby="age-error" value="-3">
  <br><small id="age-error" style="color:#a12222">Please enter an age between 0 and 120.</small>
</p>

Result

Put hints before users type, not only as an error afterwards. aria-invalid="true" tells assistive technology a field currently contains an error.

Marking required fields

The required attribute tells browsers and screen readers the field is mandatory. Show it visually too — an asterisk with an explanation, or "(optional)" on the fields that aren't. If most fields are required, labelling only the optional ones is less cluttered.

Visually hidden labels

Occasionally a design has no visible label — a single search box with a button, for instance. Keep a label for assistive technology but hide it visually with a CSS utility class (don't use display: none, which hides it from screen readers too):

Try it yourself

Group the contact preference checkboxes in a fieldset with a legend, and connect the hint to the phone field:

PreviousForm Attributes Nextselect, textarea & datalist