Skip to:
Content

Opened 19 months ago

Closed 19 months ago

Last modified 18 months ago

#7065 closed enhancement (fixed)

Accessibility: Change markup order of `<tbody>` and `<tfooter>` in BP List Tables

Reported by: mercime Owned by: mercime
Milestone: 2.6 Priority: normal
Severity: normal Version:
Component: Core Keywords: has-screenshots has-patch
Cc:

Description

By default, the focus order for keyboard users and screen readers follows the structure of the underlying HTML markup. By moving <tbody> before <tfooter> within the List Tables of our Activity and Groups screens:

  • screen readers will read the table rows in the same order that these are rendered visually in the front end, instead of hearing the same information in the top row and last row being read before the second row.
  • keyboard users won't be disoriented when the focus suddenly jumps to the last row (tfooter) after tabbing through first row(thead) of the List Table and then focus jumps up back to the second row (tbody).

Keyboard tabbing, before patch:
https://cldup.com/XBB5bMKWKl.gif

Keyboard tabbing, after patch:
https://cldup.com/vfGYew3VNg.gif

Screen reader, before and after patch:
https://cldup.com/HPCQnboJoE.png

Patch coming up.

Attachments (1)

7065.patch (1.3 KB) - added by mercime 19 months ago.

Download all attachments as: .zip

Change History (6)

@mercime
19 months ago

#1 @mercime
19 months ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 2.6

#2 @dcavins
19 months ago

Just a note: With HTML4, <tfoot> had to appear before the <tbody>; that requirement has been relaxed with HTML5: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot

#3 @mercime
19 months ago

Thanks @dcavins! We are fortunate that the WordPress admin has been using HTML5 DOCTYPE declaration for a while now so we're good to go here for a11y's sake :)

#4 @mercime
19 months ago

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

In 10776:

Accessibility: Improve focus order in the Activity and Groups screens.

Ensured that the underlying DOM order is consistent with the
visual order by moving <tbody> before <tfoot> within the List
Tables in the Groups and Activity wp-admin screens.

Fixes #7065.

#5 @DJPaul
18 months ago

  • Component changed from General - UX/UI to Core
Note: See TracTickets for help on using tickets.