如何构造属性的HTML标签以与屏幕阅读器和多个表单配合使用

对于HTML中的

标签

元素，最好使用

for

属性绑定到

输入

元素：

<div>
  <label for="myinput">My Input Label</label>
  <input id="myinput" type="text" />
</div>

我的输入标签

而不是

<label>
  My input Label
  <input type="text" />
</label

我的输入标签
除非您支持较旧的屏幕阅读器/浏览器组合，否则可以将标签文本和字段包装在一个
中。您链接的WCAG文档中引用的示例是10个或更多版本，没有遵守wrapped
s的IE bug在IE7中消失了（我想，可能更早）

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

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

因此，这些应该适用于您（不知道您用户的技术概况）：


名字：

及


是的，请给我发垃圾邮件。
这不仅与
标签
和可访问性阅读器相关，还与任何id相关。例如，Javascript假定id是唯一的。并不是说我对你的表单一无所知，但我会质疑从用户体验的角度复制表单的必要性。您是要编写重复的代码，还是要以编程方式在服务器端或客户端复制它。我假设这些都在一个页面上，或者它是一个单页面应用程序。对——我知道ID应该是唯一的。有问题的表单，比如说它是一个“联系我”表单，其中一个处于模式，另一个位于登录页的页脚。我可以通过编程定义ID（在服务器上预处理或在客户端本身的渲染步骤中）。我想我的问题是，我该如何避免这样做，以及是否有其他方法可以很好地满足无障碍读者的需求。这不是无障碍问题，至少一开始不是。这是一个解析问题。无论发生什么情况，您都需要唯一的
id
属性。如果动态定义/生成
id
值，则只需应用相同的代码为相应的
定义/生成
属性。
<label>
 First Name:
 <input type="text">
</label>

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