Make WordPress Core


Ignore:
Timestamp:
10/07/2019 12:41:50 PM (5 years ago)
Author:
afercia
Message:

Accessibility: Media: Improve the search media field labelling.

Visible <label> elements benefit all users. The placeholder attribute should not be used as a replacement for visible labels.
Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format.

Screen readers may not announce a placeholder attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example:

  • users with cognitive disabilities may have trouble remembering what the filled field does
  • 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

Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia.
See #40331.
Fixes #47138.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/class-wp-media-list-table.php

    r45932 r46418  
    271271
    272272    <div class="search-form">
    273         <label for="media-search-input" class="screen-reader-text"><?php esc_html_e( 'Search Media' ); ?></label>
    274         <input type="search" placeholder="<?php esc_attr_e( 'Search media items...' ); ?>" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>"></div>
     273        <label for="media-search-input" class="media-search-input-label"><?php esc_html_e( 'Search' ); ?></label>
     274        <input type="search" id="media-search-input" class="search" name="s" value="<?php _admin_search_query(); ?>"></div>
    275275    </div>
    276276        <?php
Note: See TracChangeset for help on using the changeset viewer.