List table: sortable column headers accessibility

[afercia]

List tables can be sorted activating the links in the sortable table headers (if any), in ascending and descending order. See screenshot:

For screen reader users, there's no indication at all the columns can be sorted. A far as I see, this feature is not even mentioned in the Help tab. There are just some links and users don't have a clue what they're meant for. Screen readers will read out, for example:

column 2
Title link
column 6
Comments link
column 7
Date link

It would be very beneficial to add a clear, concise, information about the header links purpose.

• which columns are sortable
• which order users will get when activating the links (descending or ascending?)
• the current sorting and order

Also sighted users would probably benefit from a clear indication of the initial sorting. In fact, the arrow is displayed only when you change the default sorting so you already have to know the columns are sortable. Displaying the arrow in the initial view could help, as it's done in all similar applications I can think of.

I would also suggest to review the ordering associated with the "first click" on a header link. For example, in the Posts table clicking the Comments header the first time gives an ascending order by Comments count, showing the Posts with 0 comments first, while probably would be more useful to have the Posts with the higher number of Comments displayed first.

Any thoughts and patches more than welcome.

[joedolson]

Add screen reader text for sort directions; turn on sort icon

[joedolson]

The attached patch adds screen reader text that says "Sorted in %s order. Click to sort %s" according to the current sort order, and adds that to the link text.

It also makes the sort icon visible by default for any column where the sort has been changed.

[afercia]

I fear we can't do it this way.Unfortunately, any text added in the table headers (which have scope=col) will be read out again by screen readers for each table cell in that column.

Also, unrelated to the patch but makes things a bit more difficult, in the initial view $current_order is always set to "asc" even when, for example in the Posts screen, is "desc".

if ( isset( $_GET['order'] ) && 'desc' == $_GET['order'] )
	$current_order = 'desc';
else
	$current_order = 'asc';

[joedolson]

Blah. That's a good point, and nasty. The only solution I can think of to that is to move the sorting link out of the table heading, but that's an ugly thing o do, as well, and will make it harder to find.

If we set up the text as an aria-describedby or aria-labelledby and associated it with the link, do you think that should be read as part of the th scope?

(Not *is* it read, necessarily - I'm thinking more about whether or not it *should* be read, in principle.)

[afercia]

Replying to joedolson:

If we set up the text as an aria-describedby or aria-labelledby and associated it with the link, do you think that should be read as part of the th scope?

Theoretically, it shouldn't. Looks promising, will try and let you know :)

[afercia]

Related: #32416

[rianrietveld]

@afercia and I have been brainstorming and we came up with the following idea:

We make a drop down menu above the list table and add the rows that can be sorted, like

<option>Title ascending</option>
<option>Title descending</option>
<option>Comments descending</option>
<option>Comments ascending</option>

Then we hide this drop down menu with screen reader text.

The advantage is that a screen reader user now can tell by the selected option, how the table is sorted.
The main reason for removing this info outside header (TH) is because else it will read out for every cell in the table.

Then, to reduce the noise for screen readers even more we can add aria-hidden to <span class="sorting-indicator"></span> to prevent the dash icon to be read out

<span class="sorting-indicator" aria-hidden="true"></span>

[afercia]

Replying to joedolson:

If we set up the text as an aria-describedby or aria-labelledby and associated it with the link, do you think that should be read as part of the th scope?

Experimented a bit in the last days and couldn't find a clean way to add aria-describedby on the table headers and at the same time to avoid the description being read out when navigating through the table cells. Basically, anything inside a table header will be read out as the header content.
To keep it simple, maybe we should just provide information about the sortable headers and a separate control outside the table and then hide this with screen-reader-text.
In addition to what Rian pointed out in the previous comment, here's a summary and some other points discussed in our brainstorming session:

• add info in the Help tab
• make visually clear the difference between sortable and not sortable columns
• add screen-reader-text before the table about sorting and order
• show the arrow on the currently sorted column, if any
• on hover and focus show the arrows on sortable columns
• use ​aria-sort, while not universally supported, WordPress is in the position to actually encourage web standards adoption; as far as I know, it works at least in JAWS and NVDA

[afercia]

Thinking some information could be added in an aria-describedby attribute on the table itself:
<table aria-describedby="table-desc" ...
that would be read out just one time when entering the table, similarly to the old, now discouraged, ​summary attribute.

[afercia]

For reference and to make things clear, see the screenshot below. This is one of the things we would like to do in this ticket, should be hidden with screen-reader-text or maybe used as target for aria-describedby, details still to define, just to give an idea:

[afercia]

Updated patch, first pass. I guess there are things to discuss and better practices to follow, but it's a start. Happy for any feedback and improvements.

To keep things simple, I've decided to not create a new method to get additional information about sortable columns. get_sortable_columns() appeared to me the most logical place to add them to. This way, the new information will be available also in get_column_info() where there's already a filter that custom post types and custom taxonomies can use to add their own things. See screenshot:

Added a new method print_table_description() (similar to print_column_headers(), there's a bit of repetition in the code here) to print out the table information. For now, the new info is visible for testing purposes right before the tables, maybe we'll hide them with screen-reader-text.

About header links, couldn't find any clean way to add orderby and asc/desc feedback and at the same time to avoid that being read out when navigating through the table cells. Open to any suggestions. I'm tempted to just keep the plain links and add some hint in the table description, something like: "Activate the table header links to change order." Accessibility team, any thoughts?

Finally, aria-sort will make compliant screen readers announce the asc/desc order for the currently sorted column. Added bonus, the arrow is now correctly displayed also in the initial view.

@todo:

• add some info in the Help tabs
• consider to visually increase the difference between sortable and non-sortable columns
• improve documentation :)

Tested with NVDA, when entering the table it will read out, for example:

table with 22 rows and 7 columns
Table ordered by Date. Descending order. <-- `aria-describedby`
row 1  column 1
Select All checkbox  not checked
column 2
link Title
column 3
Author
column 4
Categories
column 5
Tags
column 6
link Comments
column 7 sorted descending <-- `aria-sort`
link Date

[afercia]

See point 3 in this NVDA bug report: ​http://community.nvda-project.org/ticket/3566
Accessibility team, any thoughts more than welcome. See also:
​http://www.w3.org/TR/html5/tabular-data.html#attr-th-abbr
​https://bugzilla.mozilla.org/show_bug.cgi?id=673418
Maybe abbr is not universally supported yet, but looks like is going to stay with us in the future, see the HTML 5.1 working draft
​http://www.w3.org/TR/html51/semantics.html#attr-th-abbr

[rianrietveld]

Adding abbr to a th seems like a good idea, if it's in the HTML5 specs, and it doesn't break anything, why not.

[joedolson]

I definitely give preference to meeting specifications, even if the assistive tech isn't supporting it properly. It's a better long-term strategy than attempting a work around.

[afercia]

In the updated patch:

• hide the table description paragraph with screen-reader-text
• add some screen-reader-text in the table header cells to indicate which columns are sortable and which order users will get when activating the link
• use the ​th abbr attribute as alternative, shorter, label for the header cell, as per discussion in the accessibility team

Would greatly appreciate feedback from native English speakers about all the new text proposed in the patch and suggestions for better wording.

[afercia]

Will try to summarize for devs and committers:

• we need to give feedback about the current tables 'order by' and 'asc/desc order', also in the initial view
• we also need to make clear which columns are sortable and what will happen when users click on the table header links
• hence, we need to get additional information about the sortable columns extending what is set in get_sortable_columns()
• a new method print_table_description() prints a hidden table description, referenced as target for the table aria-describedby attribute

Of course we're totally open to discuss a different implementation and better practices, any thoughts more than welcome.

[afercia]

Patch still applies after r32644.

[afercia]

Refreshed patch after latest relevant changes to List Tables, see r32721 and following ones, r32736 and following ones, r32752 and following ones.
Would greatly appreciate some devs eyes on this ticket :)

[wonderboymusic]

There's a lot going on here, will take a look

[afercia]

Refreshed patch after recent responsive list table changes see 33016. Also, the initial asc or desc order defaults now to "false" because there are tables that don't have a column corresponding to the initial order, e.g. Comments (initially sorted by comment date but there's no "date" column).

[afercia]

Replying to wonderboymusic:

There's a lot going on here, will take a look

@wonderboymusic anything we can do to help this ticket move on? :)

[obenland]

Given the size of the patch and how it changes the way sortable columns work, I feel like we should give this more time rather than trying to squeeze it in late in the beta cycle.

[johnjamesjacoby]

There's some good work in this ticket, so kudos everyone!

I just ran across another case where these arrows act strangely: wp-admin/network/users.php

To start, the arrow is backwards. Clicking the "Registered" column header sorts the same direction, but inverts the arrow. Clicking again inverts the arrow again, and orders the other direction. It's pretty weird.

[afercia]

#47047 was marked as a duplicate.

[joedolson]

I'm assigning this to myself and milestoning for 6.3. That may be ambitious, but there was a lot of work done here and I think we should be able to move it on. There's been a fair amount of progression in support for sortable states in tables for ARIA, so we may have better options now.

[joedolson]

Refresh patch

[joedolson]

Refreshed patch. This is just a starting point. I'm going to re-implement this using aria-sort & some revisions to the visual indicators.

[joedolson]

Update patch with visual changes

[joedolson]

aria-sort was already in the previous patch; I just overlooked it when refreshing. However, this patch incorporates some visual changes:

1) Sort arrows are always visible. This helps make it more obvious that sorting links are controls; otherwise the distinction between a linked header and an unlinked header is very minimal.

2) Both up and down arrows are visible by default. Neither are highlighted if the column is not used for sorting, if a sort is active, the sort direction currently engaged is highlighted.