- Success Criterion 3.3.2
- Conformance level A
Placeholder Text Used as the Only Label, Vanishing on Input
3.3.2 — Labels or Instructions
Scenario
Setting
A crowdfunding platform's campaign page
What’s wrong
Placeholder used as the only label/instruction (vanishes on entry).
Example
<input type="number" placeholder="Pledge amount, e.g. $50">
<!-- no <label>, and the placeholder disappears the moment the backer starts typing -->Why it matters
A backer who clicks away and comes back, or a screen reader user landing mid-form, has no way to tell what this now-empty-looking box is for.
How to test
Click into a field and type: if the only 'label' was placeholder text that disappears once you start typing, it fails.
How to fix
Keep a persistent visible label and let the placeholder only show an example format, not the field's only identification.
<label for="pledge-amount">Pledge amount (USD)</label>
<input type="number" id="pledge-amount" placeholder="50">Outcome
A backer returning to the form still sees what the field is for and completes their pledge.
Who is affected
Screen reader users, since placeholders are announced inconsistently, and people with memory or attention difficulties who lose context once text is typed.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Multi-Part Field Like a Phone Number With No Text Label
- Icon-Only Search Field With No Accessible Label
- Required Input Format Never Stated Until After an Error
- No Indication of Which Fields on a Form Are Required
- Radio Button Group Missing Its Question or Prompt Text
- Field Instructions Placed After the Field They’re Meant to Explain