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

Question

根据我在 this SO post 中阅读的内容，fieldset 标记的主要目的不是在逻辑上对其他标签和输入进行语义分组并设置它们的样式。

如果我不想样式选项，但想要语义，我应该隐藏它吗？还是根本不用它？

Answer 1

如果您的设计在视觉上仍然正确（即焦点指示正确、布局合理、标签顺序合乎逻辑等），那么您可以使用 fieldset 并在视觉上隐藏它（您不能使用在 fieldset 本身上视觉隐藏 class，因为那样会隐藏所有内容）。

为了正确使用它，您需要添加一个 legend 来解释 fieldset 的含义。

fieldset 和 legend 可以增强屏幕 reader 用户的可用性（并帮助 google 理解您的表单，因此对 SEO 来说是一个小小的好处）所以你应该如果在语义上合适，一定要将它包含在您的表单中。

为了删除样式，您删除 fieldset 上的边框，然后在图例中添加 visually-hidden css class。

我整理了一个简短的片段来向您展示我将如何在没有任何视觉样式的情况下进行设置。

该组将被读取："filter our work by" & 屏幕选择的选项 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>

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

Should we style a fieldset tag as hidden for accessibility concerns?

html

accessibility

user-experience