placeholder-as-label

Placeholder text is a short hint shown inside an empty field. It disappears as soon as the user types or the browser auto-fills the field, so it cannot be relied on as the field's only label or accessible name. A visible, persistent label keeps the field's purpose clear at all times, even after a value is entered. Placeholder text is also often low contrast and can be mistaken for a value that is already filled in, which adds to the confusion.

Pass Patterns

Visible label associated with the input

The <label> provides a persistent name, and the placeholder is only a format hint.

<label for="email_address">Email address</label>
<input type="email" id="email_address" name="email_address" placeholder="name@example.com" />

Visible text bound with aria-labelledby

The visible text above the field stays on screen at all times, and aria-labelledby uses it as the input's accessible name.

<span id="full_name_label">Full name</span>
<input type="text" name="full_name" aria-labelledby="full_name_label" placeholder="First and last name" />

Fail Patterns

Placeholder used as the only label

The input has no <label>, aria-label, or aria-labelledby, so its only label is the placeholder, which disappears once a value is present.

<input type="email" name="email" placeholder="Primary email address" />

A form of placeholder-only fields

Every field loses its label as soon as it is filled in or auto-filled, leaving the user unsure what each one was for.

<input type="text" name="full_name" placeholder="Full name" />
<input type="text" name="company" placeholder="Company" />
<input type="tel" name="phone" placeholder="Phone number" />

WCAG techniques

Sufficient techniques

• ARIA14: Using aria-label to provide an accessible name where a visible label cannot be used
• ARIA16: Using aria-labelledby to provide a name for user interface controls
• G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes
• H44: Using label elements to associate text labels with form controls

Failure techniques

• F68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name

ACT Rules

• Form field has non-empty accessible name

Try It Yourself

Visual check

1. Look at the empty field and note the hint text shown inside it.
2. Type a value into the field, or let the browser auto-fill it.
3. Check whether any text identifying the field is still visible.

Expected results: A visible label remains beside the field, so its purpose stays clear after a value is entered.

Actual results: The placeholder was the only label, so once the field has a value nothing on screen identifies what it is for.

Using a screen reader

1. Load the page and open a screen reader.
2. Type a value into the field, or let the browser auto-fill it.
3. Move focus away from the field, then back to it, and listen to what the screen reader announces.

Expected results: The screen reader announces the field's name, its role, and the entered value, for example “Email address, edit text, name@example.com”.

Actual results: The screen reader announces only the role and the entered value, or the name is missing or inconsistent, because it came from the placeholder.

Inspecting the browser dev-tools

1. Open your browser's dev tools and select the input element.
2. Look for an associated <label for>, aria-label, or aria-labelledby.
3. If none are present, check whether the only descriptive text is the placeholder attribute.

Expected results: The field's name comes from a <label>, aria-label, or aria-labelledby that stays in place regardless of the field's value.

Actual results: The field's only descriptive text is its placeholder attribute, which is not a reliable, persistent label.

FAQ

Standards and Regulations

Personas impacted by this issue

• Screen Reader
• Voice Input
• Cognitive
• Low Vision

Related Issues

• accessible-name
• missing-contextual-labeling
• form-field-multiple-labels