Chrome Lighthouse 警告：“表单元素没有关联的标签”（但它们确实有标签）答案

【问题标题】：Chrome Lighthouse warning: "Form elements do not have associated labels" (but they do have a label)Chrome Lighthouse 警告：“表单元素没有关联的标签”（但它们确实有标签）
【发布时间】：2019-04-04 19:07:25
【问题描述】：

我一定遗漏了一些明显的东西 - 为什么这个页面没有在 Google Chrome (Lighthouse) 审核中验证？

<!doctype html>
<html lang="en">
<head>
<title>Label Test</title>
</head>
<body>

<form action="form.php" method="post">

<label>
<input name="phrase" id="phrase" type="text">
</label>

</form>

</body>
</html>

上面写着：

“表单元素没有关联的标签。”失败的元素：

<input name="phrase" id="phrase" type="text">

（我尝试使用<label for="phrase"，但仍然失败。

【问题讨论】：

</label> 需要放在<input> 之前：w3.org/WAI/tutorials/forms/labels

标签： google-chrome label lighthouse

【解决方案1】：

我认为灯塔在抱怨，因为您的标签标签没有任何内容，它缺少实际的标签文本。

调整标记以包含表单元素的描述将使页面的可访问性得分为 100。

<!doctype html>
<html lang="en">
  <head>
    <title>Label Test</title>
  </head>
  <body>

    <form action="form.php" method="post">

      <label>
        field label text
        <input name="phrase" id="phrase" type="text">
      </label>

    </form>

  </body>
</html>

有关详细信息，请参阅W3 Web Accessibility Tutorial for labelling controls。

【讨论】：

如果我的表单很简单，不需要标签，我还想删除警告怎么办？
如果输入没有标签，怎么会有人知道输入什么？如果你想隐藏标签，那么我建议使用accessible hide，这样辅助设备仍然可以理解它是什么。
是的，有一种情况，例如，表格的标题描述了所有信息，并且输入也有一个placeholder，所以我删除标签使表格更清晰但可以理解......这个怎么样案例？
占位符文本不能像标签一样用来描述输入，因为一旦输入焦点ref，它就会消失。它也不会列在页面的表单标签列表中。
在你的情况下，表单不需要标签，因为它有标题的论点可能没问题，我敢说一些视力质量不同的用户可以使用它。然而，就像具有绿色背景和黄色文本的页面在技术上可读性一样，使用起来可能不是很好。