[wp-trac] [WordPress Trac] #37648: Bind label to Plugins > Install search input field

[WordPress Trac]

#37648: Bind label to Plugins > Install search input field
--------------------------+--------------------------------------------
 Reporter:  mercime       |       Owner:
     Type:  defect (bug)  |      Status:  closed
 Priority:  normal        |   Milestone:
Component:  Plugins       |     Version:
 Severity:  normal        |  Resolution:  invalid
 Keywords:  has-patch     |     Focuses:  accessibility, administration
--------------------------+--------------------------------------------
Changes (by afercia):

 * status:  new => closed
 * resolution:   => invalid
 * milestone:  Future Release =>


Comment:

 A widget can be nested inside its <label> element ''but even in that case,
 it is considered best practice'' to set the for attribute because some
 assistive technologies do not understand implicit relationships between
 labels and widgets.

 This MDN statement sounds a bit arbitrary to me, not so clear ''who''
 considers that a best practice, and no argumentation or data to support
 it. Also, seems [https://developer.mozilla.org/en-
 US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form#The_<label>_element
 the HTML example on that same page] goes against that statement. See the
 comment in the example:
 `<!-- so here, the 'for' attribute is redundant. -->`

 I'd recommend to stick to what the W3C says:

 '''HTML5 spec:'''
 https://www.w3.org/TR/html5/forms.html#the-label-element
 > The label element represents a caption in a user interface. The caption
 can be associated with a specific form control, known as the label
 element's labeled control, '''either''' using the for attribute, or by
 putting the form control inside the label element itself.

 '''W3C Web Accessibility Tutorials:'''
 https://www.w3.org/WAI/tutorials/forms/labels/
 > A label and a form control need to be associated with each other
 '''either''' implicitly or explicitly.

 Also, I'd recommend to have a look at the following post because the
 argumentations there are supported by extensive tests, even if they're a
 bit old (2011):
 https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-form-
 control-labeling/
 > ... if you want controls to be understandable to AT users label controls
 using for and id. Do not use the control inside the label method. '''Do
 not use a combination of the 2 methods'''.

 The current recommendation in WordPress is to avoid a combination of the
 two techniques. I guess there are still cases that need to be properly
 addressed though. And yes, probably the A11y Coding Standards handbook
 page needs to clarify a bit this issue :) /cc @joedolson

 Going to close this ticket. Please consider discussion can continue on
 closed tickets, and do feel free to re-open it if new information or new
 data may suggest improvements or better implementations.

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