2

我一定遗漏了一些明显的东西——为什么这个页面没有在谷歌浏览器（灯塔）审计中验证？

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

4

1 回答 1

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 labeling controls。

于 2019-04-04T11:07:25.740 回答