应如何构建 HTML Label For 属性以使用屏幕阅读器和多个表单

Question

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

由于可访问性和屏幕阅读器更好地理解前面的示例

相关 1

相关 2

但是，在 html 规范中，ID 必须(应该)对于整个文档是唯一的

相关假设我想在网站的两个不同部分呈现表单。这意味着我不能在label上使用for属性，因为它需要id才能正常工作。我应该如何构建表单，以便它可以在文档中复制并仍然被辅助功能读者理解？

我知道我可以处理label/input上的 Id，以确保它们是唯一的。我想知道是否有解决方案：

1. 与屏幕阅读器配合良好
2. 不需要forlabel属性

Answer 1

除非您支持较旧的屏幕阅读器/浏览器组合，否则您可以将标签文本和字段包装在一个<label>中。您链接的WCAG文档中引用的示例是10个版本或更多版本，并且不遵守包装<label>的IE错误在IE7中消失了(我认为，也许更早)。

请注意，根据您编写 CSS 的方式，存在潜在的样式差异，以及取决于您编写 JS 的方式，存在潜在的事件冒泡问题。但是对于纯 HTML 来说，这很好。

请记住，屏幕阅读器并不是从<label>元素中受益的唯一工具。有运动障碍的用户受益于更大的整体打击区域。视力低下或认知障碍的用户可以从浏览器默认焦点样式中受益。最重要的是，并非所有屏幕阅读器用户都是盲人，因此您要确保视力正常的用户的体验与使用屏幕阅读器的用户类似。

因此，这些应该对您有用(无需了解用户的技术配置文件)：

<label>
First Name:
<input type="text">
</label>

和

<label>
<input type="checkbox">
Yes, please spam me.
</label>