html - 出于可访问性的考虑，我们是否应该将字段集标记设置为隐藏？(Should we style a fieldset tag as hidden for accessibility concerns?)

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.

(根据我在这篇SO文章中所读到的内容，fieldset标签的主要目的不是在逻辑上对其他标签和输入进行逻辑分组并对其进行样式设置。)

If I don't want to styling option, but want the semantic meaning, should I just hide it?

(如果我不想样式选项，但想要语义，我应该隐藏它吗？)

or not use it at all?

(还是根本不使用它？)

  ask by Duarte Arribas translate from so

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).

(如果您的设计在视觉上仍然正确（即正确显示了焦点，布局有意义，逻辑上的制表符顺序等），则可以使用fieldset并在视觉上隐藏它（不能在fieldset本身上使用视觉上隐藏的类，因为那样将隐藏所有内容）。)

In order to use it correctly you do need to add a legend explaining what the fieldset is about.

(为了正确使用它，您确实需要添加一个legend说明该fieldset含义。)

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.

(fieldset和legend可以提高屏幕阅读器用户的可用性（并帮助Google了解您的表单，因此对SEO来说是一笔微不足道的好处），因此，如果在语义上适当，则应将其包括在表单中。)

In order to remove styling you remove the border on the fieldset and then add a visually-hidden css class to the legend.

(为了删除样式，您可以删除fieldset上的边框，然后向图例中添加visually-hidden CSS类。)

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>