Pages, Posts, Comments Screens - Prompts for Screen Readers

[grahamarmfield]

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.

2. 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".

3. 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?

[MikeLittle]

Adds labels to theme search fields.

[MikeLittle]

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.

[MikeLittle]

Adds labels to select all checkboxes.

[MikeLittle]

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).

[nacin]

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.

[nacin]

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

[MikeLittle]

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.

[MikeLittle]

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

[MikeLittle]

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.

[ryan]

In [21317]:

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

[ryan]

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

[ryan]

In [21318]:

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

[nacin]

 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).

[MikeLittle]

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

[MikeLittle]

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

[MikeLittle]

Implements translatable search label

[MikeLittle]

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.

[SergeyBiryukov]

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

[MikeLittle]

Fixes typo in Sergey's patch

[MikeLittle]

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

[ryan]

In [21323]:

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

[nacin]

Anything left here?