WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 years ago

Last modified 5 years ago

#30914 closed enhancement (fixed)

WP List Table: improve table footer tab sequence

Reported by: afercia Owned by: azaozz
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.1
Component: Administration Keywords: has-patch ui-feedback commit
Focuses: ui, accessibility Cc:

Description

WP_List_Table always uses a table footer tfoot except for the navigation menu locations where it's commented out since r23810.

Since the tfoot element is placed before the tbody, the tab order follows what's in the markup despite the fact the tfoot is rendered by browsers below the tbody. See the resulting tab sequence in the screenshot below:

https://cldup.com/EWGULSRbfz.png

  • keyboard users: when tabbing through focusable elements in the table, they will see the page "jump" to the bottom and then jump back to the top when the tab stop # 9 is focused
  • screen reader users: while screen readers provide them with special keystrokes to move inside tables, when tabbing or reading sequentially (down arrow key) they will hear the same table header infos read out twice before they can get the actual table data, for example:

Row 1
Column 1 Select all checkbox not checked
Column 2 Title
Column 6 Comments
Column 7 Date

tab again and the table footer gets focus, screen readers will read the same information again:

Row 22
Column 1 Select all checkbox not checked
Column 2 Title
Column 6 Comments
Column 7 Date

Whether this is to be considered a browsers bug or not, or probably a specification "gray area", in HTML5 it's now possible to place the tfoot after the tbody, see http://www.w3.org/TR/html5/tabular-data.html#the-table-element and that will help both keyboard users and screen reader users, matching the visual order with the tab order.

Proposed patch:

  • moves the tfoot below the tbody
  • fixes the "Comments" header: currently it's an empty link without any text
  • proposes to use the standard link styles for the links in the table headers

@todo:

  • consider removing the title attribute from the "Comments bubble"
  • find a solution for the Calendar widget without assuming HTML5 is used

This was also quickly discussed in Slack #accessibility, see also following days

Attachments (2)

30914.patch (5.8 KB) - added by afercia 6 years ago.
30914.2.patch (5.6 KB) - added by DrewAPicture 6 years ago.

Download all attachments as: .zip

Change History (12)

@afercia
6 years ago

#1 @afercia
6 years ago

  • Keywords has-patch ui-feedback added

#2 @DrewAPicture
6 years ago

  • Keywords commit added
  • Milestone changed from Awaiting Review to 4.2
  • Priority changed from normal to high

Patch still applies, and I can confirm the tabbing sequence is much more logical now with the tfoot element at the bottom of the table(s).

It would be nice to get the thumbs-up from @helen or @azaozz or somebody pretty familiar with admin CSS before commit.

#3 follow-up: @azaozz
6 years ago

30914.patch looks good. We should move tfoot after tbody as it is explicitly allowed in HTML 5.0.

The only thing I'm not sure about is removing overflow: hidden; from all th and td. Don't see a good reason to change that here.

#4 @DrewAPicture
6 years ago

30914.2.patch skips removing overflow: hidden;.

#5 in reply to: ↑ 3 @afercia
6 years ago

Replying to azaozz:

The only thing I'm not sure about is removing overflow: hidden; from all th and td. Don't see a good reason to change that here.

That was related to broken focus style, see:
https://core.trac.wordpress.org/attachment/ticket/29897/Screen%20Shot%202014-09-28%20at%2010.59.54.png

Not sure if overflow: hidden is really needed in table headers and cells, shouldn't they always contain their content by definition?

#7 follow-up: @SergeyBiryukov
5 years ago

overflow: hidden; was added in [9733]. I think it's no longer relevant. Removing it fixes the focus styles, as noted in comment:5.

30914.patch should be good to go.

#8 in reply to: ↑ 7 @azaozz
5 years ago

Replying to SergeyBiryukov:

Wow, 6 years :) Seems it is needed for old IE only.

#9 @azaozz
5 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 31513:

Improve table footer tab sequence by moving <tfoot> after <tbody>. Props afercia, rianrietveld, DrewAPicture. Fixes #30914.

#10 @DrewAPicture
5 years ago

  • Priority changed from high to normal
Note: See TracTickets for help on using tickets.