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:
?To conform to 3.3.2 Labels or Instructions (WCAG 2.1 A) does a label have to be present regardless of the state of a control? /cc @patrick_h_lauke
— Steve Faulkner (@stevefaulkner) February 19, 2019
The answer:
Unless the state means that it does not require user-input, or there are instructions instead of / as well as a label.
— Alastair Campbell (@alastc) February 19, 2019
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
once the user starts typing something in, the label/instructions are not visible anymore. or if the form is shown back to the user already filled in, those fields won’t have a visible label/instruction either. in both cases, this then fails 3.3.2
— patrick h. lauke #toryScum #clapForFlagWankers (@patrick_h_lauke) May 23, 2019
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?