placeholder-as-label

Placeholder attribute is not a valid accessible label.

Who might be affected
Screen Reader
Voice Control
Cognitive

Description

Although screen readers parse and announce placeholders, they are still not considered valid accessible names for several reasons. First, there is the purpose of the "placeholder" attribute. Placeholders are intended to provide users with additional information or an example of correctly filling out the input field to support or complement the information the user receives from the input field's label. (To learn more about the placeholder attribute, see HTML Standard # attr-input-placeholder)
The second reason placeholders cannot be used as an accessible name is their inconsistency. When any value is entered in the input field, screen readers do not read the placeholder. Instead, the entered value will be read (and displayed). This behavior may confuse screen reader users and users with specific cognitive disabilities regarding the context of the input field.
Today, it is highly recommended and, in some cases, even required for accessibility that input fields with a clear purpose are auto-filled. However, in cases where input fields are auto-filled, screen reader users will not perceive their name (and, therefore, their context) unless they first delete the entered value.

Quick Fixes

In any case you must ensure that “placeholder” is not the only attribute that’s labeling input fields.

1<label for="email_address">Email:</label>
2 <input type="email" id="email_address" placeholder="i.e. your_name@example.com" />
3
4<input type="text" aria-label="Full name" placeholder="Given name first" />
1<input type="email" placeholder="Primary email address" />
2
3<input type="text" placeholder="Full name" />

How Users Are Affected

Screen reader users may not get the input field's label and therefore have difficulty understanding its purpose or context. Voice activation software users may also have difficulty using the input field

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.3.1 Info and Relationships (A) | 4.1.2 Name, Role, Value (A)