Just so we’re all clear on this, the HTML5 placeholder attribute in a text input is not a replacement for the label element. Period. The placeholder should only be used as a brief example of the text to be entered.
Besides inconsistent support for screen readers, using a placeholder as an input label can create usability problems and issues for those with cognitive impairments. The placeholder should be used like a title attribute (tooltip); it provides only supplementary information. If the information is required for the user (such as a strict text format) then this should be conveyed in the main content of the page, not in an attribute.
The W3C HTML5 placeholder specification specifically states it should be a “short hint…intended to aid the user with data entry” and also states:
The placeholder attribute should not be used as a replacement for a label.
- The HTML5 placeholder attribute is not a substitute for the label element
- HTML5 Accessibility Chops: the placeholder attribute
(Removed) Why HTML Placeholders Don’t Replace HTML Labels
- Don’t use placeholder text as labels
On @a11yMemes, check out this humorous take on placeholder.
Addendum (more references):
- Using the HTML5 placeholder attribute by Léonie Watson.
- 3 Types of False Simplicity by Christian Holst
- Don’t Put Labels Inside Text Boxes (Unless You’re Luke W) by UX Matters
- Mobile Form Usability: Never Use Inline Labels by Baymard Institute
- 4 reasons to avoid using placeholder text in forms by George Hoyland
Also see Web Axe follow-up post: Floated Labels Still Suck.
Related Tweet Jan 2016:
Wait, what goes in this field?
Hints are not labels! pic.twitter.com/rclanPHPdq
— Steven Hoober (@shoobe01) January 18, 2016