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.

Addendum