fieldset and legend

#html #forms #accessibility #small-print

Every radio group is really a question with a set of answers. The label on each radio is only one of them.

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 who lands on the second radio by keyboard hears “Phone, radio button, two of two” and nothing at all about what’s being asked. The question is sitting in an <h3> two elements up. It looks attached to the radios, but nothing in the markup connects the two.

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

Nobody uses it, probably because it’s awkward to style. The <legend> sits in a notch cut out of the fieldset border and ignores most of what you tell it about layout.

The classic move is to zero out the border and position the legend. That’s fine. If you keep the elements and restyle them to nothing then you get the semantics for free.

A lot of these go the same way. The accessible version isn’t more markup, it’s the right markup. The objection always seems to be about how it looks and not about what it does.

Read similar posts

View posts by tag

#accessibility #agency #ai #careers #cross-browser-compatibility #css #culture #debugging #documentation #ecommerce #forms #git #html #images #javascript #performance #php #privacy #scss #security #shopify #small-print #tooling #typography #wordpress