fieldset 图例中是否允许使用 h3 标签？

Question

我开发了一个带有表单的应用程序。这些表单由字段集构成，因此您可以查看哪些输入字段属于一个部分。每个字段集都有一个图例。代码如下所示：

<fieldset>
  <legend>Title</legend>
  <label>Title: <input id="title" type="text"/></label>
  <button>Create Object</button>
</fieldset>

现在我们做了一个屏幕阅读器测试，因为我们有盲人用户。我们提到过，屏幕阅读器 (JAWS) 会像阅读普通文本一样阅读 legend 中的标题。所以它是这样写的："Title. Title. Input for title." 但是我们期望这样的东西："Caption Title. Title. Input for title."
用户说如果图例是标题会更好，这样她就可以跳到带有 JAWL-command.

的部分

现在我的问题是：是否允许（HTML 规范）将 filedset-legend 包裹在例如h3 标签？ - 更好的问题：如果我在 legend-tag 中放置一个 h3-tag 即使它不符合 w3c-conform，它对内部应用程序有影响吗？：

<fieldset>
  <legend><h3>Title</h3></legend>
  <label>Title: <input id="title" type="text"/></label>
  <button>Create Object</button>
</fieldset>

如果不允许，您对此问题的解决方案是什么？编写自定义字段集？

目标是屏幕阅读器在阅读页面时区分 legend-text 和普通文本。我怎样才能做到这一点？

Answer 1

不，您的代码产生无效 HTML:

Error: Element h3 not allowed as child of element legend in this context.

你可以通过运行下面的代码通过 the W3C validator 自己找到这个：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <fieldset>
      <legend><h3>Title</h3></legend>
      <label>Title: <input id="title" type="text"/></label>
      <button>Create Object</button>
    </fieldset>
  </body>
</html>

解决方案

我建议只这样做 :

legend {
  font-weight: bold;
  font-size: 1.17em; 
}

.screen-reader-only {
  position: absolute;
  left: -999em;
}

<fieldset>
  <legend><span class="screen-reader-only">Caption </span>Title</legend>
  <label>Title: <input id="title" type="text"/></label>
  <button>Create Object</button>
</fieldset>

另见 this Fiddle。

这样，Caption 始终由屏幕阅读器读取，但从不显示。

Answer 2

就我个人而言，在这方面，我宁愿为我的用户提供服务，也不愿遵守规则。

如果您确实在图例中使用了 h3 标签，那就这样吧 - 您的用户将非常感激。在这里坚持有效 html 的唯一获胜者是你，这对用户没有任何好处。 -- 但是，我不确定您是否真的需要这里的 fieldset/legend。

由于 OP 将其用于内部应用程序/内部网，我相信忽略 SEO 和搜索引擎/蜘蛛程序是完全可以的..

fieldset 图例中是否允许使用 h3 标签？

Is a h3-tag allowed within legend of fieldset?

html

legend

fieldset

jaws-screen-reader

解决方案