div vs fieldset elements - 图例验证

Question

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

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

我们可以向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>

图例元素上的"隐藏"类具有指定的"display:none"规则,用于隐藏视图中的内容.此外,屏幕阅读器会跳过显示的内容:none.通过在字段集上设置aria-labelledby attibute,我们告诉屏幕阅读器使用具有相应id的元素(这里允许多个id).通过使用h2(或任何其他标题元素),我们得到了一个正确的文档大纲,我们最终得到了可访问,有效和SEO友好的DRY代码.

Answer 3

你是对的,这FIELDSET符合法案.

DIV经常使用,IMO,用于所有情况,其中设计师并不真正知道还有什么用于容器,就像TABLE过去经常用于布局(主要是出于懒惰)一样.

我没有看到空LEGEND元素的问题,但考虑用H1风格替换你LEGEND的最大语义yumminess.