Warning Form controls missing an accessible label
Why every input, select, and textarea needs a <label>, aria-label, or aria-labelledby, and how each option works.
The validator checks visible form controls (text inputs, selects, textareas — not hidden, submit, reset, button, or image inputs) for an accessible name, via a wrapping or associated <label>, aria-label, or aria-labelledby.
Example
<!-- Associated by for/id -->
<label for="email">Email</label>
<input id="email" type="email">
<!-- Wrapping label, no id needed -->
<label>Email <input type="email"></label>
<!-- No visible label — aria-label instead -->
<input type="search" aria-label="Search products">Why it matters
A placeholder is not a label — it disappears the moment the user types, and many screen readers don't announce it consistently the way they do a real label. Without one of the three association methods above, a screen reader user hears only "edit text" with no indication of what the field is for. A real <label> also expands the clickable/tappable area, since clicking the label text focuses the associated input — useful for small checkboxes and radio buttons especially.
Frequently asked questions
Is a placeholder enough instead of a label?
No. Placeholder text vanishes once the user starts typing, isn't reliably exposed to assistive technology the way a label is, and typically has lower contrast — it fails as the sole means of identifying a field.
When should I use aria-label instead of a visible <label>?
When a visible label would be redundant or doesn't fit the design — a search icon-only input, for example. aria-label provides the same accessible name without visible text. Prefer a real <label> whenever there's room for one.