出于可访问性考虑，我们是否应该将字段集标记样式设置为隐藏？

Question

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?

Answer 1

If your design is still visually correct (ie 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>