• Success Criterion 1.3.1
  • Conformance level A

Form Label That Disappears the Moment You Start Typing

1.3.1 — Info and Relationships

Scenario

Setting

An email client's compose window

What’s wrong

Placeholder-only "labels" that vanish on input.

Example 

<input type="text" placeholder="To" class="recipients-field">

Why it matters

A screen reader user who pauses mid-typing to think has nothing announced when they return, since the placeholder vanishes the instant text exists.

How to test

Focus the field, then start typing: if the visible 'label' text disappears (because it was only a placeholder) with nothing left to identify the field, it fails.

How to fix

Keep the placeholder for a visual hint, but give every field a real label that never disappears.

<label for="to-field" class="visually-hidden">To</label>
<input id="to-field" type="text" placeholder="To" class="recipients-field">

Outcome

A user who tabs back to the recipients field still hears To announced, no matter what's already typed.

Who is affected

Screen reader and low vision users composing a message lose the field's identity as soon as they start typing.

Learn more

Related scenarios