009 — Placeholders are not labels
by Óscar Otero
1 min read
In HTML, the placeholders are small texts that are visible in empty inputs. They are not an alternative to labels (the text used to describe the input), or hints (an additional text to display instructions to aid the user with data entry).
In the following example, we can see an input using the placeholder to describe the data to introduce. This pattern has a lot of usability and accessibility issues, for example when the user starts typing something, the placeholder disappears. This is a usability issue because requires short-term memory for users with cognitive limitations.
In this other example, the placeholder is used to place a hint with instructions about the expected data. We have the same problem as in the previous example: the instructions are not visible when the user starts typing:
The only acceptable use case for placeholders is to provide an example of a possible value. But always starts with "Example:" or something similar to make it clear that it's not a real value (some users confuse the placeholder with a filled input):
Only the first name, without spaces.
