Предупреждение Chrome Lighthouse: "Элементы формы не имеют связанных меток" (но они имеют метку)

Я, должно быть, упускаю что-то очевидное - почему эта страница не проходит проверку в 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" но все равно не получается.

Источник

0 ответов

Я думаю, что Lighthouse жалуется, потому что у вашего ярлыка нет содержимого, отсутствует фактический текст ярлыка.

Настройка разметки для включения описания элемента формы позволит странице набрать 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 для маркировки элементов управления.

Источник
Другие вопросы по тегам