多部分标签：使用 ARIA 为包含嵌入式字段的标签添加标签

问题

您有一个表单，在其中向用户提问，但答案本身就在问题中提到。我们都从浏览器设置中了解到的一个经典示例是“在 x 天后删除历史记录”。“在 x 天后删除历史记录”位于文本框左侧，“x”是数字，例如 21，“天”紧随文本框之后，形成一个易于理解的句子。

如果您使用的是屏幕阅读器，您是否注意到，当您在 Firefox 中访问此设置时，它会告诉您“在 21 天后删除历史记录”？，随后会宣布您位于文本框中，并且其中包含数字 21。这很酷，不是吗？您无需四处导航即可找出单位。“天”可以轻松地改为“月”或“年”，在许多普通的对话框中，除了使用屏幕审查命令四处导航之外，没有其他方法可以找到这一点。

解决方案在于一个名为 aria-labelledby 的 ARIA 属性。其参数是一个字符串，该字符串由您想要连接到单个可访问名称的 HTML 元素的 ID 组成。

aria-labelledby 和 aria-describedby 都指定在要标记的表单元素上，例如 <input> 在这两种情况下，可能也存在的标签/标签控件绑定会被 aria-labelledby 覆盖。如果您在 HTML 页面上提供了 aria-labelledby，则还应提供标签构建，以便也支持尚不支持 ARIA 的旧版浏览器。使用 Firefox 3，您的视障用户将自动从新属性获得更好的无障碍访问，但旧版浏览器的用户也不会因此而陷入困境。

示例

body {
  margin: 1rem;
}

html

<input
  aria-labelledby="labelShutdown shutdownTime shutdownUnit"
  type="checkbox" />

<span id="labelShutdown">Shut down computer after</span>

<input
  aria-labelledby="labelShutdown shutdownTime shutdownUnit"
  id="shutdownTime"
  type="text"
  value="10" />

<span id="shutdownUnit"> minutes</span>

JAWS 8 用户注意

JAWS 8.0 具有自己的查找标签的逻辑，导致它始终覆盖 HTML 文档的文本框获得的 accessibleName。使用 JAWS 8，我还没有找到一种方法可以让它接受上面示例中的标签。但 NVDA 和 Window-Eyes 可以正常工作，Linux 上的 Orca 也没有任何问题。

注意： 待定：添加更多兼容性信息

是否可以在不使用 ARIA 的情况下实现？

社区成员 Ben Millard 在一篇博文中指出，可以使用 HTML 4 将控件嵌入到标签中，如上例所示，方法是将输入嵌入到标签中。感谢您的信息，Ben！它非常有用，并表明一些多年来可用的技术有时会让专家们也忽略。此技术在 Firefox 中有效；但是，它目前在许多其他浏览器（包括 IE）中不起作用。对于包含嵌入式表单控件的标签，使用 aria-labelledby 仍然是最佳方法。