Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome Lighthouse warning: "Form elements do not have associated labels" (but they do have a label)

I must be missing something obvious - why doesn't this page validate in Google Chrome (Lighthouse) audit?

<!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>

It says that:

"Form elements do not have associated labels." Failing elements:

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

(I tried to use <label for="phrase" but it still fails.

like image 293
Tom Avatar asked Dec 02 '25 13:12

Tom


1 Answers

I think lighthouse is complaining because your label tag doesn't have any content, it is missing the actual label text.

Adjusting the markup to include a description of the form element will allow the page to score 100 for accessibility.

<!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>

For more information, see the W3 Web Accessibility Tutorial for labelling controls.

like image 189
Ed Wilde Avatar answered Dec 04 '25 10:12

Ed Wilde



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!