DEV Community

Discussion on: Fieldset, this stranger.

Collapse
 
equinusocio profile image
Mattia Astorino • Edited

In the article there is a link to the spec with examples. I suggest you to follow the specs to understand what you are doing, not to copy what others are doing because in the past years many bad practices were considered valid.

From the spec:

<fieldset name="letfields" disabled>
  <legend> <label>
   <input type=radio name=clubtype>
   My card has letters on it
  </label> </legend>
  <p><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></p>
</fieldset>
Collapse
 
briankephart profile image
Brian Kephart

Thanks for the response! I did read the spec, and every example I saw, including the one copied in your response, has at least two control elements within the fieldset. The case I was asking about is a single control element with a label, like this example from your post:

<fieldset>
  <input type="checkbox" id="enableCalc">
  <label for="enableCalc">Enable calc</label>
</fieldset>

I agree that this approach improves the clarity of the markup versus using a <div>, but I could not find such usage in the spec. Nothing in the spec says you cannot have a set with just one control element, though, and it clearly works, so I don't think the spec has any real problem with it.

Like I commented before, though, I found a few accessibility resources that specifically say not to use <fieldset> unless you need to group multiple controls together. No reason is given for the warning, but these same resources support the use of <fieldset> for groups of controls, so there seems to be something about this specific usage that is a potential issue, which is why I asked for your comment. I think the recommendation is just trying to avoid unnecessary verbosity when the markup is read by a screen reader, but I'm not sure.

Thread Thread
 
equinusocio profile image
Mattia Astorino

Even the table spec doesn't tell you to not use them for layouts :).
Fieldset can also be nested, so it's not correct to use it only to group radios.