← All writing
Craft · · 2 min

fieldset and legend

HTML Forms Accessibility Small Print

Every radio group is really a question with a set of answers, and the label on each radio is only the answer.

contact.html
<fieldset>
  <legend>How should we contact you?</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>
HTML

Without the <fieldset>, somebody arriving on the second radio by keyboard hears “Phone, radio button, two of two” and nothing at all about what is being asked. The question is sitting in an <h3> two elements up, visually attached and programmatically unrelated.

<legend> fixes that. It gets announced with each control in the group, so the question travels with the answers.

Nobody uses it because it is genuinely awkward to style. The <legend> sits in a notch cut out of the fieldset border, it ignores most of what you tell it about layout, and the classic move is to zero out the border and position it. That is fine. Keep the elements, restyle them to nothing. You have the semantics for free.

Same shape as a lot of these: the accessible version is not more markup, it is the right markup, and the objection is always about how it looks rather than about what it does.

Read similar posts
2 min

details and summary

An accordion with keyboard support, correct announcement and no JavaScript at all, which most of us reimplemented by hand for about a decade before noticing.

1 min

optgroup

A select with 40 options in it is nearly always a select that wanted three or four labeled groups, and the element for that has been sitting in HTML the entire time.