我们是否应该将字段集标记设置为隐藏以解决可访问性问题？答案

【问题标题】：Should we style a fieldset tag as hidden for accessibility concerns?我们是否应该将字段集标记设置为隐藏以解决可访问性问题？
【发布时间】：2019-11-30 21:25:47
【问题描述】：

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

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

【问题讨论】：

标签： html accessibility user-experience

【解决方案1】：

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

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

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

要删除样式，请删除 fieldset 上的边框，然后将 visually-hidden css 类添加到图例中。

我已经整理了一个快速的 sn-p 来向您展示如何在没有任何视觉样式的情况下进行设置。

该组将显示为：“过滤我们的工作”和屏幕阅读器选择的选项。

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>

【讨论】：