Label is not persistent. For example: placeholder is being used as the only visual label for a text field. The placeholder label is not visually available after data is entered in the text field.

Link to Label is not persistent. For example: placeholder is being used as the only visual label for a text field. The placeholder label is not visually available after data is entered in the text field. copied to clipboard

Rule ID:: label-is-placeholder
User Impact:: Serious
WCAG :: 3.3.2.a

Rule

Labels MUST be visible.

Background

Filling out forms correctly can be one of the more time consuming and frustrating online user experiences, and it can be even more challenging for people with disabilities. Well-designed labels and instructions provide enough information so people can fill out forms without undue confusion or errors. Labels and instructions should:

be visible, clear, accurate, and informative,
be programmatically associated with their form fields.
disclose any constraints such as required data formats or ranges, and
identify required fields.

Placeholder text cannot be the only visible label for a form field, because it disappears when a user types text into the field and therefore is no longer visible. To fix this issue, provide a visible label for the form field other than placeholder text, and ensure the label and the field are programmatically associated.

If you want to preserve the styling of placeholder text, consider using "floating labels" that have the appearance of placeholder text, but move above or beside the form field when a user inputs text. This allows the text to remain visible and thus meet this requirement.

Code Examples

Good Examples:

Input has <label>:

<p>
  <label for="fname_a">First Name:</label>
  <input type="text" name="fname_a" id="fname_a">
</p>

<p>
  <label for="lname_a">Last Name:</label>
  <input type="text" name="lname_a" id="lname_a">
</p>

Input has label through aria-labelledby:

<p id="fname-label">First Name:</p>
<input type="text" id="fname" aria-labelledby="fname-label">

<p id="lname-label">Last Name:</p>
<input type="text" id="lname" aria-labelledby="lname-label">

Failure Example:

Label is placeholder:

<p>
  <input type="text" placeholder="Last Name">
  <input type="text" placeholder="First Name">
  <input type="text" placeholder="Middle Name">
</p>

How To Fix

To fix this issue, do one of the following:

Provide a persistent and programmatically associated label for form elements, using <label> or a label associated through aria-labelledby.
Provide a persistent visual label and use aria-label to provide a label with any relevant additional information for non-sighted users.