[wp-trac] [WordPress Trac] #63971: Multiple select elements associated with tables in the admin (filters, user role changes) lack visible, persistent labels

[WordPress Trac]

#63971: Multiple select elements associated with tables in the admin (filters, user
role changes) lack visible, persistent labels
-------------------------------+-----------------------------
 Reporter:  alh0319            |      Owner:  (none)
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  General            |    Version:
 Severity:  normal             |   Keywords:
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 Throughout the admin, there are select elements that have labels hidden
 with screen reader text and that rely on the default or first option in
 the select to provide a visible label.

 Here is an example, filters for the posts table:

 {{{
 <div class="alignleft actions">
                                 <label for="filter-by-date" class="screen-
 reader-text">Filter by date</label>
                 <select name="m" id="filter-by-date">
                         <option selected="selected" value="0">All
 dates</option>
                 <option value="202508">August 2025</option>
                 </select>
                 <label class="screen-reader-text" for="cat">Filter by
 category</label><select name="cat" id="cat" class="postform">
         <option value="0">All Categories</option>
         <option class="level-0" value="1">Uncategorized</option>
 </select>
 <input type="submit" name="filter_action" id="post-query-submit"
 class="button" value="Filter">         </div>
 }}}

 [https://private-user-
 images.githubusercontent.com/13153456/489316152-9127bf2b-5112-4412-aaf8-e8bd9f808670.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NTc4ODQ2MzcsIm5iZiI6MTc1Nzg4NDMzNywicGF0aCI6Ii8xMzE1MzQ1Ni80ODkzMTYxNTItOTEyN2JmMmItNTExMi00NDEyLWFhZjgtZThiZDlmODA4NjcwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA5MTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwOTE0VDIxMTIxN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJlYzBhYmYxMWZhZmIxMjYzNjRiMjc4YjAyNTU2ZDZlOGEyYTZlNzU2OTRmYWQzZWQwYmI2ODgzMTQ5NmMzMzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.4XjPhUl9Pd0j6RNRjS9_oGBSrhPjsQXlymtPScsM_SE
 See image of post filters missing visible lables.]

 Other places that this technique has been used include:
 * Bulk actions select
 * Change user role select
 * Media filters
 * Comment filters

 [https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html
 WCAG 3.3.2: Labels or Instructions (Level A)] requires that labels or
 instructions be provided when content requires user input. This is
 generally interpreted to require visible and persistent labels.

 In the current implementation, once a user has selected an option in the
 select, there is no longer a visible label for the select. It is posisble
 for users to link directly to filtered versions of these tables which
 would pre-fill the select with a date or category, for example, in which
 case any user following that link would not have access to the label for
 the select.

 It is worth noting that to receive the accessibility-ready tag for a
 theme, we require all inputs and form fields to have visible and
 persistent labels. This technique in the admin would fail an accessibility
 ready review were it followed in a theme.

 In addition, these fields also fail
 [https://www.w3.org/WAI/WCAG21/Understanding/label-in-name 2.5.3: Label in
 Name (Level A)], as the visible text for the first option (or any selected
 option) does not match the label.

 Example: The hidden accessible name for the date filter select is "Filter
 by date" and the visible text is "All dates" or any selected date, such as
 "August 2025".

 This mismatch between the visible text and the label would make it
 difficult for users who rely on voice control to interact with these
 fields.


 The admin UI should be reworked so that selects have visible labels that
 don't rely on the default option in the select.

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