Placeholder Attribute Is Not A Label!

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. For example, how does one review the information entered if the placeholder is now gone?

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.

Supporting articles:

• 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

Bonus!
On @a11yMemes, check out this humorous take on placeholder.

Addendum (more references):

• Using the HTML5 placeholder attribute by Léonie Watson (Aug. 2012)
• 3 Types of False Simplicity by Christian Holst (Jun. 2012)
• Don’t Put Labels Inside Text Boxes (Unless You’re Luke W) by UX Matters (Feb. 2013)
• Mobile Form Usability: Never Use Inline Labels by Baymard Institute (Jun. 2013)
• Placeholders in Form Fields Are Harmful by Nielsen Norman Group (2014)
• 11 reasons why placeholders are problematic by Adam Silver (2016)
• 4 reasons to avoid using placeholder text in forms by George Hoyland (Feb. 2017)
• Don’t Use The Placeholder Attribute (2018) by Eric Bailey via Smashing Magazine
• The Anatomy of Accessible Forms: The Problem with Placeholders by Raghavendra Peri (Jun. 2019)
• The Anatomy of Accessible Forms: The Problem with Placeholders (2024)

Also see Web Axe follow-up post: Floated Labels Still Suck.

Related Tweet Jan 2016:

https://twitter.com/shoobe01/status/689221623774220288