Nearly 2/3 of websites fail the Lighthouse form label test on mobile, according to HTTPArchive. This hurts users and AI agents. How do you use form labels correctly?
A properly constructed form label looks like this:
<label for="myfield">My Field</label> <input type="text" id="myfield">Let’s walk through this…
The <label> tag contains the human or agent readable name of the field.
It contains the “for” attribute. As in, what field is this label for?
The “for” attribute must exactly match the “id” attribute of the corresponding <input>.
That brings us to the <input> field. This is the actual form field that you do something with. It could be a text field, a select box, a checkbox, etc. The <input> field needs to contain the “id” attribute matching the “for” attribute of the label.
AI agents use this explicit mapping between the label and the field to understand exactly what data belongs in which field.
It also helps accessibility. Doing this means that clicking the label automatically puts the cursor focus into the input field. That is great for users with motor impairments or anyone on a mobile screen. Screen readers will read the label text immediately when the user tabs into the field.
If you can’t show a visible label, the aria-label attribute can be used on the input field:
<input type="text” aria-label="my field">Along with checking that the level is present, Lighthouse also checks for multiple labels. Each field gets one label. Multiple labels make it harder for assistive technology and AI agents to understand what’s happening with each field.
Lighthouse will also check that the label matches visible text describing the form field. In other words, don’t be manipulative or misleading with hidden label text.