placeholder attribute came along, lots of us started using it as way to show form field hints. Their appeal lies in their minimal aesthetic and that they save space.
Some go a step further replacing labels with placeholders. Either way, placeholders are an inclusive design anti-pattern because:
1. They're hard to remember
The placeholder disappears when the user starts typing making it hard to recall. Users have to delete their entry to view the instructions again.
2. Lack of browser support
Not all browsers support placeholders. In this case, users will see no placeholder text.
3. Populated values lack clarity
While it's more obvious that a missing label is bad, but hint text helps users too. If it's missing answering a question becomes harder and you may have to rely on an error message.
4. Reviewing entries before submission is difficult
Some users check their entries before submitting. As the placeholder won't be there any more it will be very hard to reconcile their answers against the requirements of the field.
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 placeholder text on focus
Some older browsers hide placeholder text
onfocus 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 may 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 (which is unselectable) because they think it's actual text which is a waste of time and confusing.
8. They have insufficient contrast
Placeholder text has low contrast to signify that it's not a real value making it hard to read.
9. Screen readers may not announce them
Some screen reader don't announce placeholder text making the form especialy difficult to use in that context.
10. The hit area is reduced
Clicking a label moves the focus to the field. This helps everyone and especially users with motor impairments. Fields with the label and hint outside the input increases the size of the hit area.
11. Long placeholder text may get get cut off
If the placeholder is longer than the size of the field it will get cropped. This means you're unnecessarily constrained as to what information you can place 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.
If hint text is valuable, make it easy-to-read and readily accessible. If placeholder text is ‘just an enhancement’ then don't include it at all. 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: