Question

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

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

现在我们进行了屏幕阅读器测试，因为我们有盲人用户。我们提到过，屏幕阅读器（JAWS）读取legend中的标题就像普通文本一样。所以它写着：“标题。标题。标题输入。”不过我们期待的是：“标题标题。标题。输入标题。”
用户说如果传说是一个标题会更好，所以她可以用JAWL命令跳转到部分。

现在我的问题是：是否允许（HTML规范）将文件集图例包裹在例如h3代码？ - 更好的问题：内部应用程序是否重要，如果我在h3 - 标记内放置legend - 标记，即使它不符合w3c标准吗？：

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

如果不允许，您的解决方案是什么？编程自定义字段集？

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

Answer 1

不，您的代码会生成无效的HTML：

错误：在此上下文中，元素h3不允许作为元素legend的子元素。

您可以通过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的人就是你，这对用户没有任何好处。 - 但是，我不确定你真的需要一个字段集/图例。

由于OP正在将其用于内部app / intranet，我相信完全可以忽略SEO和搜索引擎/蜘蛛..

字段集的图例中是否允许使用h3标记？

2 个答案:

解决方案