Placeholder text: accessible or nah?

What is placeholder text?

Per HTML's living standards:

The placeholder attribute represents a short hint intended to aid the user with data entry when the input field is empty. The placeholder attribute should not be used as an alternative to a label.

Seems straightforward enough. Let's look into how the Web Content Accessibility Guidelines (WCAG) feels about them.

Is there WCAG 2.1 success criteria about placeholder text?

Short answer: no. While the presence of a placeholder attribute doesn't violate any WCAG success criteria, it doesn't mean it is a usable solution for all people. Here is what I'm finding on the web:

What is wrong with placeholder text?

Placeholder text makes forms harder to scan to see what fields are empty

As more and more complex forms become available digitally, designers need to find ways to make these forms easier to move through quickly. As a user scans through partially completed forms, the placeholder text can potentially make some people think input fields are filled erroneously.

Placeholder text disappears

When a person starts entering information into an input field with placeholder text, the placeholder text disappears! If the placeholder text acts as the form's only label or provides helpful information about the required format, like MM/DD/YYYY) the user no long has access to it. The only way to see this information again is to remove what you entered, creating an experience where helpful information is gone as soon as the person needs it.

For folks who are tech savvy, they may know they can ctrl+x their information to reveal the placeholder text again and quickly paste their input back in, but for less tech literate people, they may not understand why the helper text disappeared or how to bring it back.

Placeholder text is not recognized by all assistive technology

Some designers may opt to use the placeholder attribute as a way to indicate the purpose of the input field, likely to create a minimalistic look. However, this means that assistive technology, like screen readers or voice recognition software, cannot understand or interact with these input fields.

Placeholder text often has poor color contrast

Many designs using placeholder text use a light gray color to visually communicate that the field is not filled. Unfortunately, this often runs into color contrast issues. If the contrast is too low of the placeholder text, the information it is conveying may not be seen by people experiencing low vision conditions. If designers recognize this and choose to use a higher contrast placeholder color, they risk users interpreting the placeholder as filled in text.

Placeholder text does not get translated by in-browser translators

Browsers that offer automatic translations of webpages skip over placeholder attributes. People translating pages have the expectation that all content will be updated however, because placeholders are skipped over, the user will be unsuccessful in understanding and using the input field if the placeholder acts as a label or instructions.

Is there a better alternative?

Good question. Yes! Providing input field instructions below the field mitigates all the previous issues mentioned above. Designers/developers can also use aria-describedby to associate the instructions with the input field so people using assistive technology are aware of them.