Question

我必须缺少明显的东西-为什么此页面无法在Google Chrome（灯塔）审核中验证？

<!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"，但仍然失败。

Answer 1

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

调整标记以包括对form元素的描述，将使页面的可访问性得分为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。

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

1 个答案: