How to fix form fields without labels

WCAG 1.3.1 Info and Relationships and 4.1.2 Name, Role, Value require every form control to have a programmatic label, so assistive technology can announce what the field is for. The usual culprits:

• Using a placeholder instead of a label (it disappears when typing and is not a reliable accessible name).
• A visible label that is not associated with its input.
• Icon-only or search fields with no text at all.

Associate a real <label> with the input by matching for to the input's id:

<label for="email">Email address</label>
<input id="email" type="email" name="email">

Wrapping also works: <label>Email <input type="email"></label>. When there is no visible label by design (for example a search field with a button), give it an accessible name instead:

<input type="search" aria-label="Search products">

You can keep a placeholder as a hint, but it must be in addition to a label, never instead of one.

Run the free scan above to list every control missing a label, with the exact element shown. Fix the markup, then re-scan to confirm. The same checks run as a browser extension and a CI gate so new forms do not regress.