What it is
A properly coded label is text explicitly linked to a specific form field in the page's underlying code (typically through a for attribute matching the field's id), so that a screen reader announces that label the instant a visitor moves focus into the field — "Email address, edit text", for example. This is a stricter, more technical requirement than simply having label-like text visible somewhere near the field, which is the angle covered in our general form field labeling guide focused on conversion rates.
A field can look perfectly labeled to a sighted visitor (text sitting right next to the box) while having no actual coded connection between that text and the field at all — which is exactly the gap this accessibility-focused check is looking for.
Why it matters
A screen reader doesn't see the visual layout of a page — it reads the underlying code structure, so a label that's only visually near a field but not explicitly linked to it in the code might never be announced at all when a screen reader user reaches that field. Without hearing what a field is for, they're left guessing or skipping it entirely, which can mean a screen reader user simply cannot complete a form that a sighted visitor finds perfectly straightforward.
This is one of the most well-established, specifically named requirements in WCAG (the standard accessibility guidelines many organizations must legally meet), precisely because forms are so central to actually completing a task on the web — signing up, checking out, getting in touch.
How to fix it
- For every form field, add a
<label>element with aforattribute matching that field'sidattribute exactly. - Alternatively, wrap the field directly inside the
<label>tag itself, which creates the same explicit connection without needing matching IDs. - For a field with no visible label at all by design (a search icon-only field, for example), use
aria-label="Search"directly on the field so a screen reader still announces its purpose. - Avoid relying on placeholder text alone as a substitute for a real label — screen readers handle placeholder text inconsistently, and it disappears once text is entered anyway.
- Test by tabbing through your form using only the keyboard and a free screen reader (NVDA, VoiceOver) to confirm every field announces a clear purpose.