HTML中的label元素被认为是使用for属性绑定到input元素的最佳做法：
<div>
<label for="myinput">My Input Label</label>
<input id="myinput" type="text" />
</div>
而不是
<label>
My input Label
<input type="text" />
</label
由于可访问性和屏幕阅读器更好地理解前面的例子
但是，hds规范Relevant
中的整个文档必须（应该）是唯一的让我们假设我想在我的网站的两个不同部分进行表单渲染。这意味着我无法使用for上的label属性，因为它需要id才能正常工作。我应该如何构建一个表单，以便它可以在文档中重复，并且仍然可以被辅助功能读者理解？
我知道我可以处理label / input上的ID以确保它们是唯一的。我想知道是否有解决方案：
for label属性
答案 0 :(得分：2)
除非您支持较旧的屏幕阅读器/浏览器组合，否则您可以将标签文本和字段包装在一个<label>中。您链接的WCAG文档中引用的示例是10个版本或更旧版本，并且不支持包裹<label>的IE错误在IE7中消失了（我想，也许更早）。
请注意，根据您编写CSS的方式，可能存在样式差异，具体取决于您编写CSS的方式以及潜在的事件冒泡问题。但对于纯HTML，这很好。
请记住，屏幕阅读器并不是<label>元素受益的唯一工具。有运动障碍的用户可从更大的总体命中区域中受益。视力低下或认知障碍的用户可以从浏览器默认焦点样式中受益。除此之外，并非所有的屏幕阅读器用户都是盲人，因此您希望确保有视力的用户的体验与使用屏幕阅读器的用户类似。
所以这些应该适合您（不知道您的用户的技术配置文件）：
<label>
First Name:
<input type="text">
</label>
和
<label>
<input type="checkbox">
Yes, please spam me.
</label>