<label for="idx"> vs <label for="namex">

Question

我正在为一个主要的网站执行一个WCAG访问报告。可以预见的是，重复出现的问题之一是表单中的标签。

到目前为止，我一直认为将表单标签与其元素关联的正确方法是在标签的form属性中使用输入元素的名称，如下所示：

<label for="name[1]">Your name: </label>
<input type="text" name="name[1]" placeholder="Your name">

然而，客户端使用的框架更喜欢这样的代码：

<label for="user_first_name">Your name: </label>
<input type="text" name="name[1]" id="user_first_name" placeholder="Your name">

我的逻辑是基于这样的理解:并非所有表单元素都具有“ID”属性，允许它们被DOM唯一地操作(例如CSS和Javascript)，但所有POST和GET方法表单元素都具有“name”属性，允许将数据提交到远程服务器，这是客户端浏览器表单最常见的用法。

我不想向客户提交一个PR，因为客户对标签标签中的"for“属性的目的有错误的理解，这将导致他们无法通过下一次WCAG审核。

那是哪一种？

Answer 1

label元素的for属性的值必须是非隐藏窗体控件的ID。

或者，您可以将输入字段包装在标签内。

<label>Your name:<br>
<input type="text" name="name[1]"></label>

Answer 2

标签的for属性总是引用字段的id。

命名是不幸的，可能会让人感到困惑，但事实上，正如您所提到的，名称的唯一使用实际上是在服务器端。

如果字段完全由JavaScript处理，则完全有可能拥有一个id但没有名称的字段。这变得越来越频繁的框架，如角或反应。

相反，如果字段没有id，则不可能有任何标签链接到该字段。由于字段必须有一个标签，说明期望输入的内容，所以每个字段都应该有一个id。否则，您的站点或应用程序无法访问。

Answer 3

为了完成前面的答案，非常清楚：

可以指定for属性来指示与标题相关联的窗体控件。如果指定了属性，则属性值必须是ID的可标记元素.

虽然从规范的角度来看@Erikm的inplicit示例在技术上是正确的，但是有些屏幕读取器不会将标签与没有for属性的输入关联起来。这是屏幕阅读器的一个bug，但是您仍然应该通过指定for来解决它。

<label for='myid'>Your name:<br>
<input type="text" name="name[1]" id='myid'></label>

请注意，拥有一个<label for="some-id">不仅可以将标签与输入字段相关联，这对于屏幕阅读器用户来说是必不可少的，而且对有视力的鼠标用户也有好处，因为他们可以单击标签，焦点将移到输入字段中。