WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 22 months ago

#21325 closed enhancement (fixed)

Pages, Posts, Comments Screens - Prompts for Screen Readers

Reported by: grahamarmfield Owned by:
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.4.1
Component: Accessibility Keywords: has-patch
Focuses: Cc:

Description

Some quick wins here...

In the main display screens for Pages, Posts, Comments (and Custom Posts too) there are some input fields that could really be helped by the addition of a label to explain their purpose. This enhancement would improve the experience and ease of use for these screens for screen reader users. These labels could be made for screen readers only using CSS - ie hidden from sighted users - so as not to spoil the design.

  1. Search pages text box in the top right of the screen.
  1. The selection checkboxes - Suggest the ones in the table header and footer should have label "Select All". Suggest the check box for individual pages, posts, etc should have a label of "Select Title of page/post".
  1. Ideally the Bulk Actions and Show All Dates dropdowns should have a label but that is less important in my view as context is supplied by default option (kind of).

Happy to discuss, and to help with screen reader-only text but I believe there is a screen-reader-text CSS class available now maybe?

Attachments (9)

theme-install.diff (1.3 KB) - added by MikeLittle 2 years ago.
Adds labels to theme search fields.
list-table-select-all.diff (5.2 KB) - added by MikeLittle 2 years ago.
Adds labels to select all checkboxes.
21325.diff (722 bytes) - added by nacin 2 years ago.
21325.2.diff (3.1 KB) - added by nacin 2 years ago.
21325.3.diff (5.5 KB) - added by MikeLittle 2 years ago.
Now implements the "Select %s" pattern for links, media, and users
21325.4.diff (1.6 KB) - added by MikeLittle 2 years ago.
Now implements the "Select %s" pattern for multisite users and sites
21325.theme-installer-search.diff (989 bytes) - added by MikeLittle 2 years ago.
Implements translatable search label
21325.5.diff (10.7 KB) - added by SergeyBiryukov 2 years ago.
21325.6.diff (10.7 KB) - added by MikeLittle 2 years ago.
Fixes typo in Sergey's patch

Download all attachments as: .zip

Change History (28)

MikeLittle2 years ago

Adds labels to theme search fields.

comment:1 MikeLittle2 years ago

  • Keywords has-patch added

The posts, pages, comments, links, categories, tags, links, users, plugins, custom post types, and custom taxonomy screens do have labels for their respective search boxes. Mostly achieved through re-use of the same code. THe HTML looks like this:

<p class="search-box">
	<label class="screen-reader-text" for="post-search-input">Search Posts:</label>
	<input type="search" id="post-search-input" name="s" value="" />
	<input type="submit" name="" id="search-submit" class="button" value="Search Posts"  /></p>

The theme search does not have a label. I have attached a patch to address this.
Note the patch adds labels for the search type dropdown when it appears and the search input box. The label for the search input box is dynamic based on the setting of the drop down when the page is drawn.

A second pass might be to make this label dynamic client side (using jQuery) so that it updates when the drop down is changed. I don't know how accessible that would be.

MikeLittle2 years ago

Adds labels to select all checkboxes.

comment:2 MikeLittle2 years ago

I've attached a patch 'list-table-select-all.diff' to add a "Select all" hidden label to the select all checkbox that appears in the header for all the standard uses of list-tables functionality.

This includes comments, links, media, ms-sites, ms-themes, ms-user lists, plugins, posts, terms (cats and tags), and users.

Note, wp-admin/includes/nav-menu.php defines such a column header checkbox, but I could not see where it appears, so I didn't update that one (it may be a copy-pasta mistake).

comment:3 follow-up: nacin2 years ago

Column headers are printed twice, which means we'd end up with duplicate IDs here.

What if we hooked directly into the print_column_headers() list table method and always overrode the checkbox column? 21325.diff

Existing 'cb' => '<input type="checkbox" />' can also become 'cb' => true or 'cb' => false with this change. Unless someone is manually looping through get_column_headers() and doing their own printing, there'd be no side effect.

The one issue is that "Select all" might need to be disambiguated for localization reasons. "Select all" for posts might translate differently than "Select all" for themes, for example. The other option would be to consider the context to be selecting all "rows" or "checkboxes," in which case, we're fine. It looks like we already use "Select All" elsewhere, without context, on update-core.php and elsewhere.

nacin2 years ago

nacin2 years ago

comment:4 nacin2 years ago

21325.2.diff begins to implement the "Select %s" pattern throughout core.

comment:5 nacin2 years ago

  • Milestone changed from Awaiting Review to 3.5

comment:6 in reply to: ↑ 3 MikeLittle2 years ago

Replying to nacin:

Column headers are printed twice, which means we'd end up with duplicate IDs here.

Doh! Forgot that. I shouldn't code in the early hours!

What if we hooked directly into the print_column_headers() list table method and always overrode the checkbox column? 21325.diff

Existing 'cb' => '<input type="checkbox" />' can also become 'cb' => true or 'cb' => false with this change. Unless someone is manually looping through get_column_headers() and doing their own printing, there'd be no side effect.

That makes sense.

The one issue is that "Select all" might need to be disambiguated for localization reasons. "Select all" for posts might translate differently than "Select all" for themes, for example. The other option would be to consider the context to be selecting all "rows" or "checkboxes," in which case, we're fine. It looks like we already use "Select All" elsewhere, without context, on update-core.php and elsewhere.

I think the latter case makes sense, especially as you say, it is used elsewhere without context.

MikeLittle2 years ago

Now implements the "Select %s" pattern for links, media, and users

comment:7 MikeLittle2 years ago

New patch 21325.3.diff adds in "Select %s" pattern for Links, Media and Users,

It now covers, Posts, Terms, Pages, Links, Media, Users, Plugins, MS users, MS Themes, MS Plugins, and MS sites. I think that's everything.

comment:8 DJPaul2 years ago

  • Cc djpaul@… added

comment:9 ryan2 years ago

In [21317]:

Add screen reader text to checkboxes in list tables. Props MikeLittle, nacin. see #21325

comment:10 ryan2 years ago

The checkboxes in the network admin list tables need the same treatment.

comment:11 ryan2 years ago

In [21318]:

Add screen reader text for search fields in theme-install.php. Props MikeLittle. see #21325

comment:12 nacin2 years ago

 printf( __("Search by %s"), ( $type == 'term' ? __( 'keyword' ) : $type ) );

This isn't translatable. We know what the various $types are, so this should be easy to do 3 different strings (if it even requires that).

MikeLittle2 years ago

Now implements the "Select %s" pattern for multisite users and sites

comment:13 MikeLittle2 years ago

Patch 21325.4.diff implements the "Select %s" pattern for multisite users and sites. MS themes handled with previous patch.

MikeLittle2 years ago

Implements translatable search label

comment:14 MikeLittle2 years ago

Addressing comment 12 http://core.trac.wordpress.org/ticket/21325#comment:12, patch 21325.theme-installer-search.diff implements the "Search by x" label as three separate translatable strings.

SergeyBiryukov2 years ago

comment:15 SergeyBiryukov2 years ago

21325.5.diff is an attempt to standardize the edits. Includes 21325.4.diff and 21325.theme-installer-search.diff, as well as some cleanup of [21317].

Changes:

  • Added "Select %s" to class-wp-plugins-list-table.php
  • Replaced echo with direct HTML for consistency with surrounding code and other list table files
  • Consistent class="screen-reader-text" placement
  • Keeping </label> on the same line seems more readable to me
  • 21325.theme-installer-search.diff seems more consistent without two spaces before each line

MikeLittle2 years ago

Fixes typo in Sergey's patch

comment:16 MikeLittle2 years ago

Thanks for that Sergey. There was an oddness around line endings in your patch (I got "Stripping trailing CRs from patch." for each chunk) and one syntax error (PHP Parse error: syntax error, unexpected '.' in /mnt/hgfs/mike/sandbox/localhost/wptrunk/wp-admin/includes/class-wp-terms-list-table.php on line 240).

Both issues resolved in 21325.6.diff

Last edited 2 years ago by MikeLittle (previous) (diff)

comment:17 ryan2 years ago

In [21323]:

More screen reader text for list table checkboxes and theme install search. Props MikeLittle, SergeyBiryukov. see #21325

comment:18 nacin22 months ago

Anything left here?

comment:19 nacin22 months ago

  • Resolution set to fixed
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.