From what I've read in this SO post, the main purposes of the fieldset tag is not logically group other labels and inputs semantically and to style them.
If I don't want to styling option, but want the semantic meaning, should I just hide it? or not use it at all?
If your design is still visually correct (i.e. focus is indicated correctly, layout makes sense, logical tab order etc.) then you can use a fieldset
and hide it visually (you can't use a visually hidden class on the fieldset
itself as that would hide everything).
In order to use it correctly you do need to add a legend
explaining what the fieldset
is about.
A fieldset
and legend
can enhance usability for a screen reader user (and helps google understand your form so a tiny bonus for SEO) so you should definitely include it in your form if it is appropriate semantically.
In order to remove styling you remove the border on the fieldset
and then add a visually-hidden
css class to the legend.
I have put together a quick snippet to show you how I would set it up without any visual styling.
The group would be read: "filter our work by" & option selected by a screen reader.
fieldset{
border: none;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
<fieldset>
<legend class="visually-hidden">filter our work by</legend>
<input type="radio" name="filter" id="webdesign">
<label for="webdesign">web design</label>
<input type="radio" name="filter" id="graphicdesign">
<label for="graphicdesign">graphic design</label>
<input type="radio" name="filter" id="signage">
<label for="signage">Signage Production</label>
</fieldset>