我正在使用插件进行客户端表单验证。问题是插件添加了一个包含表单信息的标签，所以无效的表单控件现在有两个标签。我已经修改了插件，以便标签根据有效性切换；但是，我关心的是可访问性和有效的 HTML（虽然不太关心 HTML 的验证）。
那么，这样可以吗？
<label aria-hidden=true style="display:none" for="inputElement">My Input Element</label>
<label for="inputElement">My Input Element must be at least 10 characters</label>
<input id="inputElement">
我在规范中看到每个标签只能指向一个输入元素，但没有说明一个输入元素是否只能有一个标签。
谢谢。
【问题讨论】：
标签： html forms accessibility
单个输入不能有多个标签。使用屏幕阅读器的人会感到困惑。话虽如此，屏幕阅读器将不会看到带有display:none; 的任何内容。如果您只是根据输入是否有效进行切换，请改用div。
this question 的答案解释说这在技术上是正确的，但第二个答案解释了为什么你应该不这样做。
【讨论】：
role="alert"。有一个很好的例子here 用于可访问的表单验证。否则，如果屏幕阅读器用户在文本框中输入信息，并且警报在其上方，他们可能永远不会“看到”该消息。
for/id，并且所有有效的 HTML 都允许每页使用一次相同的 id。隐式：“要将标签与另一个控件隐式关联，控件元素必须在 LABEL 元素的内容内。在这种情况下，LABEL 可能只包含一个控件元素。标签本身可能位于关联控件之前或之后。”
More than one LABEL may be associated with the same control by creating multiple references via the for attribute. html5 规范只是声明If the attribute is specified, the attribute's value must be the ID of a labelable element in the same Document as the label element，没有一对一的关系要求。话虽如此，多个label 元素可能会让屏幕阅读器用户非常感到困惑。