• Success Criterion 1.3.1
  • Conformance level A

Form Fields With No Programmatic Label of Any Kind

1.3.1 — Info and Relationships

Scenario

Setting

A hotel booking site's room-selection page

What’s wrong

Form inputs with no programmatic label (label, aria-label, aria-labelledby (code pointing to the element that names it), title) — placeholder used as the only label.

Example 

<input type="text" placeholder="Number of guests">
<input type="text" placeholder="Number of nights">

Why it matters

A screen reader user tabs into the field and hears only "edit text," with no clue whether it wants guests or nights.

How to test

Tab to every form field and listen: fields with only a placeholder (no label) announce nothing useful once you start typing — placeholder text disappears from the announcement.

How to fix

A placeholder is a hint for the expected format, never a substitute for a real label element.

<label for="guests">Number of guests</label>
<input id="guests" type="text" placeholder="e.g. 2">
<label for="nights">Number of nights</label>
<input id="nights" type="text" placeholder="e.g. 3">

Outcome

A guest hears Number of guests, edit text the moment they land on the field, before typing anything.

Who is affected

Screen reader users booking a room can't tell which field is which once they start typing, since the placeholder often vanishes.

Learn more

Related scenarios