[wp-trac] [WordPress Trac] #40331: The placeholder attribute should not be used as a replacement for a label

[WordPress Trac]

#40331: The placeholder attribute should not be used as a replacement for a label
---------------------------------------+--------------------------------
 Reporter:  afercia                    |       Owner:  (none)
     Type:  defect (bug)               |      Status:  new
 Priority:  normal                     |   Milestone:  Future Release
Component:  Administration             |     Version:
 Severity:  normal                     |  Resolution:
 Keywords:  has-screenshots a11y-task  |     Focuses:  ui, accessibility
---------------------------------------+--------------------------------

Comment (by afercia):

 Important note from Steve Faulkner: https://codepen.io/stevef/post
 /placeholder-the-piss-take-label

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

 See: [https://www.w3.org/WAI/GL/low-vision-a11y-
 tf/wiki/Placeholder_Research W3C research on placeholders].

 > I first wrote about
 [https://developer.paciellogroup.com/blog/2011/02/html5-accessibility-
 chops-the-placeholder-attribute/ placeholder] back in 2011, and included
 [https://www.w3.org/TR/html50/forms.html#the-placeholder-attribute a
 note], [https://www.w3.org/TR/html5/sec-forms.html#the-placeholder-
 attribute 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.

 > placeholder as the only visible label for a control that requires user
 input fails [https://www.w3.org/TR/WCAG21/#labels-or-instructions 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.

 The entire post on codepen is a very recommended reading.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/40331#comment:10>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform