Category: label

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. 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.

Supporting articles:

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

Addendum (more references):

Hiding Labels and Sub-Headers

[Editor's note: see more recent article by Dennis, When and How to Visually Hide Content]

There are certain instances when a label or header should be used, but wouldn’t necessarily need to be seen in the layout, such as a label for a phone number and a header for a menu. Dennis discusses when and how this would be done.

Download Web Axe Episode 22 (Hiding Labels and Sub-Headers)

[Transcript]

The CSS:

.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

The XHTML:

Phone number:
(


)


-

Links: