Form Input Labels
Every input needs a visible, programmatically associated <label for='id'>. Placeholder is not a label. Found missing on 49% of homepages. The second most common WCAG failure after contrast.
Every form field needs a visible label that's linked to it in code. Faint placeholder text vanishes as you type and isn't enough.
WCAG 1.3.1 (Level A) and 3.3.2 (Level A) require visible labels that are programmatically associated with their inputs. The
Placeholder text fails as a label because: it disappears on focus, it typically has insufficient contrast, it's not reliably announced by all screen reader/browser combinations, and it removes context while the user is typing.
Why this matters
Missing form labels affect 49% of homepages — the second most common WCAG failure after contrast. Without a programmatically associated label, screen readers announce inputs as just "edit text" with no indication of what to enter. Placeholder text disappears on focus and isn't announced by all screen readers.
How to detect
Click on the label text — does the input receive focus? (If yes, the label is associated.) Run axe or WAVE to find inputs without labels. Check that placeholder text is not used as the only label.
How to fix
<!-- Explicit label association --> <label for="email">Email address</label> <input id="email" type="email" /> <!-- Implicit wrapping (also valid) --> <label> Email address <input type="email" /> </label> <!-- Icon-only input needs aria-label --> <input type="search" aria-label="Search products" /> <!-- Placeholder is NOT a label --> <input placeholder="Email" /> <!-- ✗ no accessible name -->