Categories
HTML Accessibility

re-upped: placeholder – the piss-take label

Input with placeholder text 'placeholder as label #SUX'

The reasons why use of the placeholder attribute as the only means of providing a user readable prompt for a form control is deficient UX, are voluminous. It is frustrating having to rehash this discussion endlessly.

I first wrote about placeholder back in 2011, and included a note, later a warning, about its use in the dear superseded HTML5 specification in 2014.

⚠️ Use of the placeholder attribute as a replacement for a label can reduce the accessibility and usability of the control for a range of users including older users and users with cognitive, mobility, fine motor skill or vision impairments. While the hint given by the controls label is shown at all times, the short hint given in the placeholder attribute is only shown before the user enters a value. Furthermore, placeholder text may be mistaken for a pre-filled value, and as commonly implemented the default color of the placeholder text provides insufficient contrast and the lack of a separate visible label reduces the size of the hit region available for setting focus on the control.

Unfortunately for some, the obvious and oft-stated usability/accessibility crapness of placeholder as label is not reason enough to avoid using it as a label.

“Show us the fail” they ask:

The question:

The answer:

FAIL

placeholder as the only visible label for a control that requires user input fails Success Criterion 3.3.2 Labels or Instructions

Why?

At the time of user input there is no visible label, the input purpose is mystery meat.

See the Pen
placeholder fails
by steve faulkner (@stevef)
on CodePen.

Addendum

2 replies on “re-upped: placeholder – the piss-take label”

Also worth referencing:
WCAG 2.1 “Understanding” SC 2.5.3 (label in name) states:
“Note that placeholder text within an input field is not considered an appropriate means of providing a label. The HTML5 specification states “The placeholder attribute should not be used as an alternative to a .” ”
and it references this resource:
https://www.w3.org/TR/html52/sec-forms.html#the-placeholder-attribute
It would be lovely to have this text inside of SC 3.3.2 instead of having to remember which SC has it.

i’m wondering if a major offender of this issue is the search bar we so often see around the web? in this case, is the icon with an appropriate search title, sufficient?

Leave a Reply

Your email address will not be published. Required fields are marked *