Form field labels

highaccessibility-form-labels

A field with no associated <label> is announced by a screen reader as unlabeled, placeholder text and all. The for/id fix, in one line.

What it is

This checks that every form field has an associated label — a <label> with a for attribute matching the field's id, or the input nested inside the label — read from Lighthouse's rendered-DOM audit rather than the raw HTML, so it catches labels missing at render time as well as in markup.

Placeholder text inside the input does not satisfy this: a placeholder disappears the moment someone starts typing and isn't reliably read by assistive technology the way a label is.

Why it matters

A screen reader announces a form field by its label; without one, a field is announced as an unlabeled 'edit text' with no indication of what it's asking for — for someone who can't see the placeholder text sitting inside the field, the form becomes a guessing game.

It's also one of the more consequential accessibility failures in practice, because forms tend to gate the actions that matter most on a site — checkout, sign-up, contact — so an unlabeled field doesn't just annoy a visitor, it can block them from completing the one thing the page exists for.

How to fix it

with a reference doc
html
<label for="email">Email</label>
<input id="email" type="email" name="email">

Reference documentation

Related checks

3
highColor contrastThis reads Lighthouse's own color-contrast audit: whether text has enough contrast against its background, judged by the WCAG formula rather than eyeballed. The threshold is 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold).mediumImage alt textEvery <img> should carry an alt attribute: a text description for informative images, or an empty alt="" for images that are purely decorative. This check reads it directly out of the HTML the server sent, so it runs on every scan regardless of whether a rendering engine is available.lowHeading hierarchyHeading hierarchy is whether a page's <h1> through <h6> tags step down one level at a time — an <h2> can be followed by another <h2> or an <h3>, but not by an <h4> with no <h3> in between. This check reads the sequence of heading tags in the order they appear in the HTML.

This is one of the 75 checks the scanner runs. See what we check for the full list, every severity weight, and how the score is computed from them.

See whether your own site passes form field labels.

One page, all 75 checks, free. No account, no card.

Run a scan