Form control labelling
Agents use field labels to fill in forms. Without them, they have to guess.
- Category
- Agent experience
- Standard
- Recommended
What it checks
The extension finds every visible form field on the rendered page: <input>
(other than hidden inputs), <select> and <textarea>. A field counts as
labelled if it has any of:
- an
aria-label - an
aria-labelledbyreference - a
titleattribute - a
<label>wrapped around it - a
<label for>that matches itsid
Placeholder text does not count as a label.
Results
| Status | When |
|---|---|
| Pass | Every form field is labelled |
| Fail | One or more form fields have no label |
| N/A | The page has no form fields |
| Unmeasured | The extension could not read the page (open it in the active tab) |
Unlike the other control checks, there is no warning band: a single unlabelled field fails. The result lists locators for each one.
How to fix
Associate a <label> with every field:
<label for="email">Email address</label> <input id="email" name="email" type="email" />Where a visible label does not suit the design, use aria-label:
<input type="search" name="q" aria-label="Search products" placeholder="Search" />