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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With