Placeholders are problematic
placeholder attribute came along, many of us have started using it as means of storing hints for form fields. The appeal lies in their minimal aesthetic (they save space).
Some of us have even gone a step further and replace labels with placeholders. Either way, placeholders are an inclusive design anti-pattern which causes problems for users. Here's why:
1. They're hard to remember
The placeholder disappears when the user types making it hard to recall.
2. Lack of browser support
Not all browsers support placeholders. In this case, users will see no placeholder text.
3. Populated values lack clarity
It's obvious that a missing label is fatal. But if the hint is missing, users will find it difficult to provide an answer.
4. Reviewing entries before submission is difficult
Users often check their entries before submitting the form. As the placeholder text won't be there any more it will be especially difficult to make sure they're happy with their entries. The longer the form the bigger the problem.
5. Errors are hard to fix
Labels and hints help users know how to fill out a field. If an error message appears without context it's harder to fix.
6. Some browsers hide the placeholder on focus
Some browsers hide the placeholder on focus instead of when they start typing. This means the user has to read ahead of the current field to read the hint.
7. Placeholder text may be mistaken for a value
People that don't notice the subtle difference in contrast will skip the field mistaking it for a value. One test showed that 99% of users thought they didn't need to enter a value. When the user submits the form they'll have to fix an error.
Some users try and select placeholder text because they think it's actual text which is confusing when they can't actually select it.
8. They have insufficient contrast
Placeholder text has low contrast to tell users it's not a value. Some people will struggle to read the text because of this.
9. Screen readers may not announce them
Some screen reader don't announce placeholder text making the form difficult to use for screen reader users.
10. The hit area is reduced
Clicking a label moves the focus to the field. This helps everyone but especially users with fine motor skill impairments. Fields with the label and hint outside increases the size of the hit area.
11. Placeholder text can be cut off
If the placeholder is longer than the size of the field it will be cut off. This means you're unnecessarily constrained as to what information you can put inside it.
12. Some browsers don't translate them
For example, when Chrome translates a web page, it will fail to translate placeholder text.
13. Browser auto-complete makes the problem worse
The browser's auto-completion routine populates form fields automatically. This means placeholder text disappears before users get to see it making it difficult for the user to check the values against what the fields intended.
14. In Windows High Contrast Mode placeholder text looks like an actual value
In High Contrast Mode placeholder text is given high contrast color making it look like an actual value.
Some people ask me if it's okay to use a placeholder in addition to a label. If the hint is valuable to the user, we should make it easy-to-read and readily accessible to everyone.
Other people say that the placeholder is just an enhancement and not essential. If the hint isn't essential then don't include it. Content is not an enhancement.
I write articles like this and share them with my private mailing list. No spam and definitely no popups. Just one article a month, straight to your inbox. Sign up below: