Form elements should not use placeholder attribute as the only accessible name.

When a form element uses the placeholder attribute as its only accessible name, the field has no persistent label. The placeholder text disappears the moment a user starts typing, leaving no visible indication of what the field expects. This affects multiple groups of users:

• Screen reader users may encounter a field that technically has a name derived from the placeholder, but this name is not consistently exposed across all screen reader and browser combinations. Some assistive technologies ignore placeholder text entirely when determining a field's accessible name.
• Users with cognitive disabilities often need to review their input before submitting a form. Once the placeholder vanishes, there is no way to confirm whether the entered value matches the field's purpose.
• Users with low vision frequently struggle with placeholder text because browsers typically render it in a light gray color that fails to meet minimum contrast requirements.
• Keyboard-only users who tab into a field will see the placeholder disappear on focus in some browsers, removing the label before they even begin typing.

This rule relates to WCAG 2.1 Success Criterion 3.3.2 (Labels or Instructions), which requires that labels or instructions be provided when content requires user input. A placeholder does not satisfy this requirement because it is not a persistent, visible label. SC 3.3.2 is a Level A criterion, meaning it is a baseline accessibility requirement.

How to fix it

The fix depends on your design, but the goal is always the same: give every form field a persistent, accessible name that remains visible while the user types.

The most reliable approach is to associate a <label> element with the input using the for attribute. If a visible label is not possible in your design, use aria-label or aria-labelledby to provide an accessible name. You can still use placeholder as supplementary hint text, but it should never be the only source of the field's name.

Here are the options, in order of preference:

1. Add a visible <label> element linked to the input via for and id.
2. Use aria-labelledby to point to an existing visible element that serves as the label.
3. Use aria-label to provide a text label when no visible label exists (though a visible label is always better).

Examples

Placeholder used as the only label (incorrect)

This input has no <label>, no aria-label, and no aria-labelledby. The placeholder is the only hint about the field's purpose, and it disappears on input.

<input type="email" placeholder="Email address">

Fixed with a visible label

A <label> element provides a persistent, visible name. The placeholder can remain as a supplementary hint.

<label for="email">Email address</label>
<input type="email" id="email" placeholder="e.g. jane@example.com">

Fixed with aria-label

When a visible label is not feasible, aria-label gives the field an accessible name for assistive technology. Note that sighted users still lose the label once they type, so this approach is less ideal than a visible <label>.

<input type="email" aria-label="Email address" placeholder="Email address">

Fixed with aria-labelledby

If another element on the page already contains the label text, point to it with aria-labelledby.

<h2 id="newsletter-heading">Subscribe to our newsletter</h2>
<input type="email" aria-labelledby="newsletter-heading" placeholder="Email address">

Multiple fields, all using only placeholders (incorrect)

This pattern is common in compact form designs and is problematic for every field.

<form>
  <input type="text" placeholder="First name">
  <input type="text" placeholder="Last name">
  <input type="email" placeholder="Email">
  <button type="submit">Sign up</button>
</form>

The same form, fixed with visible labels

<form>
  <label for="first-name">First name</label>
  <input type="text" id="first-name" placeholder="e.g. Jane">

  <label for="last-name">Last name</label>
  <input type="text" id="last-name" placeholder="e.g. Doe">

  <label for="email">Email</label>
  <input type="email" id="email" placeholder="e.g. jane@example.com">

  <button type="submit">Sign up</button>
</form>

In every case, the placeholder can stay as long as a proper label exists alongside it. The placeholder should add context (like an example value), not repeat the label word for word.

Learn more:

W3C Reference

Understanding Label in Name

→

W3C Reference

Placeholder is not a label

→

MDN Reference

HTML attribute: placeholder

→