Question

我需要HTML大师的一些建议。

从语义上讲，我觉得FIELDSET最适合包含用户填写和提交的字段列表的表单。但是，如果没有嵌入的LEGEND元素，页面将无法通过HTML 5验证。我们使用H1标签来标注表单，不需要传奇。

我们可以向FIELDSET添加一个空的LEGEND元素，并修复验证问题。但是，对于这种情况（除了DIV之外）还有更好的用途吗？

欣赏任何见解！

Answer 1

没有图例的字段集确实可以作为分组表单输入的一种方法。但是，不要害怕使用div或表单元素，特别是如果您打算在需要类似图例的地方重用此代码。这是因为除非您使用它们对一组复选框或单选按钮进行分组，否则应避免使用带图例的字段集。

为什么呢？一些屏幕阅读器假设字段集只会以这种方式使用并针对该用例进行优化，导致屏幕阅读器在列表中的每个输入上公布图例，使得通过输入选项卡并降低可访问性令人烦恼地冗长形式。这是一种极少数情况下，您可以通过使其过于语义丰富来降低HTML的可用性。

要获得更长的解释，请参阅此旧的（但仍然相关）链接：https://web.archive.org/web/20130922062411/http://www.rnib.org.uk/professionals/webaccessibility/wacblog/Lists/Posts/Post.aspx?id=40

Answer 2

我经常发现自己使用没有图例的表单字段集，并提出了一个优雅且屏幕阅读器友好的解决方案，同时保留了正确的文档大纲和HTML5验证。请参阅以下代码：

<section>
  <h2 id="legend-heading">
     Inputfield buttons
  </h2>

  <form method="post" action="" name="inputfield-form">
    <fieldset aria-labelledby="legend-heading">
      <legend class="hide"></legend>
      ...
    </fieldset>
  </form>
</section>

班级＆＃34;隐藏＆＃34;在图例元素上有规则＆＃34; display：none＆＃34;已分配，用于隐藏视图中的内容。此外，屏幕阅读器会跳过显示的内容：none。通过在字段集上设置aria-labelledby attibute，我们告诉屏幕阅读器使用具有相应id（multiple id's are allowed here）的元素。通过使用h2（或任何其他标题元素），我们得到了一个正确的文档大纲，我们最终得到了可访问，有效和SEO友好的DRY代码。

Answer 3

你是对的FIELDSET符合条款。

IMO常常使用

DIV来解决所有情况，即设计师并不知道还有什么用于容器，就像TABLE过去经常使用的那样布局（主要是出于懒惰）。

我发现空LEGEND元素没有问题，但考虑用样式H1替换LEGEND以获得最大的语义yumminess。

div vs fieldset elements - 图例验证

3 个答案: