WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 7 months ago

#32170 assigned defect (bug)

List table: sortable column headers accessibility

Reported by: afercia Owned by: afercia
Milestone: Future Release Priority: normal
Severity: normal Version: 4.2
Component: Administration Keywords: has-patch
Focuses: ui, accessibility Cc:

Description

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

https://cldup.com/2h3fIgOJH1.png

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.

Attachments (5)

32170.patch (1.6 KB) - added by joedolson 2 years ago.
Add screen reader text for sort directions; turn on sort icon
32170.2.patch (15.7 KB) - added by afercia 2 years ago.
32170.3.patch (17.4 KB) - added by afercia 2 years ago.
32170.4.patch (17.5 KB) - added by afercia 2 years ago.
32170.5.patch (17.6 KB) - added by afercia 2 years ago.

Download all attachments as: .zip

Change History (45)

This ticket was mentioned in Slack in #accessibility by matthew. View the logs.


2 years ago

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


2 years ago

@joedolson
2 years ago

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

#3 @joedolson
2 years ago

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.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


2 years ago

#5 @joedolson
2 years ago

  • Milestone changed from Awaiting Review to 4.3
  • Owner set to afercia
  • Status changed from new to assigned

This ticket was mentioned in Slack in #core by joedolson. View the logs.


2 years ago

#7 @afercia
2 years ago

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';

#8 follow-ups: @joedolson
2 years ago

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

#9 in reply to: ↑ 8 @afercia
2 years ago

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

#10 @afercia
2 years ago

Related: #32416

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 years ago

#12 @rianrietveld
2 years ago

@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>

#13 in reply to: ↑ 8 @afercia
2 years ago

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

#14 @afercia
2 years ago

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.

This ticket was mentioned in Slack in #core by afercia. View the logs.


2 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 years ago

#17 @afercia
2 years ago

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:
https://cldup.com/VN6FNuePgt.png

This ticket was mentioned in Slack in #core by afercia. View the logs.


2 years ago

This ticket was mentioned in Slack in #core by afercia. View the logs.


2 years ago

@afercia
2 years ago

#20 @afercia
2 years ago

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 don't 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:

https://cldup.com/q_bJc33x0S.png

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 are visible for testing purposes right before the tables, 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 check box  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
Last edited 2 years ago by afercia (previous) (diff)

#21 @afercia
2 years ago

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

#22 @rianrietveld
2 years ago

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.

#23 @joedolson
2 years ago

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.

#24 @joedolson
2 years ago

  • Keywords has-patch added; needs-patch removed

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


2 years ago

@afercia
2 years ago

#26 @afercia
2 years ago

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.

#27 @afercia
2 years ago

  • Keywords dev-feedback added

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.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 years ago

This ticket was mentioned in Slack in #core by davidakennedy. View the logs.


2 years ago

#30 @afercia
2 years ago

Patch still applies after r32644.

@afercia
2 years ago

#31 @afercia
2 years ago

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

This ticket was mentioned in Slack in #design by afercia. View the logs.


2 years ago

#33 @afercia
2 years ago

  • Keywords commit added; dev-feedback removed

#34 follow-up: @wonderboymusic
2 years ago

  • Keywords commit removed

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

@afercia
2 years ago

#35 @afercia
2 years ago

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

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 years ago

#37 in reply to: ↑ 34 @afercia
2 years ago

Replying to wonderboymusic:

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

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

#38 @obenland
2 years ago

  • Milestone changed from 4.3 to Future Release

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.

#39 @johnjamesjacoby
14 months ago

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.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


7 months ago

Note: See TracTickets for help on using tickets.