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

Question

我正在为一个主要网站实施WCAG accessiblity报告.可以预见,其中一个反复出现的问题是表格中的标签.

到目前为止,我已经假设将表单标签与其元素相关联的正确方法是在标签的表单属性中使用input元素的名称,如下所示:

<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方法表单元素都具有"名称"允许将数据提交到远程服务器的属性,这是客户端浏览器表单的最常见用途.

我不想向客户提交PR,因为他们错误地理解标签标签中"for"属性的目的,这将导致他们在下一次WCAG审核时失败.

那是哪个呢？

Answer 1

label元素的for属性值必须是非隐藏表单控件的ID.

或者您可以将输入字段包装在标签内,例如

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