[wp-trac] [WordPress Trac] #47138: Visible labelling only done via placeholder attribute

[WordPress Trac]

#47138: Visible labelling only done via placeholder attribute
-------------------------+-------------------------------------------------
 Reporter:  anevins      |      Owner:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:
 Severity:  minor        |   Keywords:  has-screenshots needs-patch
  Focuses:  ui,          |  wpcampus-report
  accessibility          |
-------------------------+-------------------------------------------------
 Moved from the WPCampus accessibility report issues on GitHub, see
 https://github.com/WordPress/gutenberg/issues/15301

 * **Severity**:
  * Low
 * **Affected Populations**:
  * Low-Vision
  * Motor Impaired
  * Cognitively Impaired
 * **Platform(s)**:
  * All / Universal
 * **Components affected**:
  * Media Dialog

 **Issue description**
 In the "Media Library" panel of the "Featured Image" modal dialog, a
 live search field is available to filter uploaded images and narrow
 results.

 While there is a label element present, it is rendered visually-hidden,
 while a placeholder with similar text is visually present in the input.

 Users who've entered any values must empty the field to see the
 placeholder text, or otherwise memorise it. Users with cognitive
 disabilities may have trouble remembering what the filled field does,
 while speech recognition users cannot see the name they can speak to set
 focus on the field. Low-vision users with high text-size may not be able
 to see the whole placeholder even when it's visible, if its value is
 clipped by the edge of the input.

 **Issue Code**
 {{{
     <div class="media-toolbar-primary search-form">


         <label for="media-search-input" class="screen-reader-text">Search
 Media</label>


         <input type="search" placeholder="Search media items..." id
 ="media-search-input" class="search">


     </div>


     ...


     .screen-reader-text  {


         border: 0;


         clip: rect(1px,1px,1px,1px);


         -webkit-clip-path: inset(50%);


         clip-path: inset(50%);


         height: 1px;


         margin: -1px;


         overflow: hidden;


         padding: 0;


         position: absolute;


         width: 1px;


         word-wrap: normal!important;


     }
 }}}

 **Remediation Guidance**
 Make labels visible instead of using placeholders, as much as possible.

 **Relevant standards**
 N/A

 **Note**: This issue may be a duplicate with other existing accessibility-
 related bugs in this project. This issue comes from the Gutenberg
 accessibility audit, performed by Tenon and funded by WP Campus. This
 issue is GUT-64 in Tenon's report

 ''See also https://core.trac.wordpress.org/ticket/40331''

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47138>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform