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” and states:
The placeholder attribute should not be used as an alternative to a label.
- The HTML5 placeholder attribute is not a substitute for the label element
- HTML5 Accessibility Chops: the placeholder attribute
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