复合标签：使用 ARIA 为包含嵌入字段的标签设置值
问题
您有一个表单，向用户提问，但答案本身就包含在问题中。我们都熟悉的浏览器设置中的一个典型例子是“删除历史记录 x 天”的设置。“删除历史记录”在文本框的左侧，“x”是数字，例如 21，然后是单词“天”，这形成了一个易于理解的句子。
如果您使用屏幕阅读器，您是否注意到，当您在 Firefox 中访问此设置时，它会告诉您“删除历史记录 21 天”？然后会播报您在一个文本框中，并且其中包含数字 21。这不是很酷吗？您无需四处导航即可找出单位。“天”很容易变成“月”或“年”，在许多普通对话框中，除了使用屏幕阅读命令四处导航外，没有其他方法可以找出这一点。
解决方案在于一个名为 aria-labelledby 的 ARIA 属性。它的参数是一个字符串，由您想要连接成单个可访问名称的 HTML 元素的 ID 组成。
aria-labelledby 和 aria-describedby 都指定在要进行标签化的表单元素上，例如 <input>。在这两种情况下，可能存在的 for/control 标签绑定都会被 aria-labelledby 覆盖。如果您在 HTML 页面上提供了 aria-labelledby，您还应该提供一个 for 构造来支持尚不支持 ARIA 的旧浏览器。使用 Firefox 3，您的视障用户将自动获得新属性带来的更好的可访问性，而旧浏览器用户也不会因此受到影响。
示例
<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 文档中文本框的可访问名称。在使用 JAWS 8 时，我还没有找到一种方法让它接受上述示例中的标签。但是 NVDA 和 Window-Eyes 可以很好地处理，Linux 上的 Orca 也没有问题。
注意： 待定：添加更多兼容性信息
不使用 ARIA 可以实现这一点吗？
社区成员 Ben Millard 在一篇博文中指出，可以使用 HTML 4 将控件嵌入标签中，如上面示例所示，方法是将 input 嵌入到 label 中。感谢 Ben 提供的信息！这非常有用，并且表明一些已经存在多年的技术有时连专家也会忽略。这种方法在 Firefox 中有效；但是，它目前在包括 IE 在内的许多其他浏览器中无效。对于带有嵌入式表单控件的标签，使用 aria-labelledby 仍然是最佳方法。