[wp-trac] [WordPress Trac] #32152: List table: Comments column accessibility improvements

[WordPress Trac]

#32152: List table: Comments column accessibility improvements
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Comments           |    Version:  4.2
 Severity:  normal             |   Keywords:  needs-patch
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 Reported by (and thanks to!) our testers in
 [https://make.wordpress.org/accessibility/2015/04/14/usertest-link-texts-
 in-the-page-with-all-posts-edit-php/ the accessibility testing session
 dedicated to the posts screen], looks like the Comments column is one of
 the most confusing for screen reader users.

 Some relevant information here is provided using just the title attribute,
 notably the number of pending comments, while other information is not
 clear, for example the visible number of comments in the "bubble": does it
 refer to "all" comments or just "approved" ones or...? IMHO, that's a bit
 confusing also for sighted users, see screenshot:

 [[Image(https://cldup.com/pcv44uBj8j.png)]]

 In recent years, WordPress has begun to actively discourage the use of
 title attributes and that's for a good reason, see for example #24766.
 ''Relying'' on the title attribute will also be discouraged in HTML 5.1
 (currently in Working Draft status): http://www.w3.org/TR/html51/dom.html
 #the-title-attribute

 Discussed a bit in the Accessibility team meeting and we'd recommend to
 remove the title attribute and use just plain text. This would require
 also a UI change and an interesting design challenge to refactor the
 comments "bubble". For example, for the visual part the bubble could be
 split in two parts with different colors to show both numbers: pending
 comments already use their own specific color in the admin menu and that
 same color could be used in the bubble too. I'm sure designers can come up
 with a nice, visual solution :) Designers welcome!

 For the accessibility part, we could just use some `screen-reader-text` to
 have a clear, complete information, for example something like:
 {{{
 "2 approved and 3 pending comments"
 "0 approved and 0 pending comments"
 }}}
 etc.

 Some testing with different screen readers:

 Firefox + NVDA when tabbing through focusable elements:
 {{{
 Comments column 6
 9 link 3 pending
 }}}

 Firefox + NVDA when navigating through table cells:
 {{{
 Comments column 6
 link 9
 }}}

 Worth noting not all screen readers read out the title attribute by
 default and users can disable the title attributes reporting in the screen
 reader settings.

 For ChromeVox, we have a nice video thanks to Tobias Clemens Häcker

 Windows7, Chrome + ChromeVox:
 https://www.youtube.com/watch?v=IteL6ZqgYeA
 to let you see and *hear* how weird it is to hear just a "zero" and don't
 have a clue what it's about.

 Highly recommended for all developers: some more videos, thanks to Jeffrey
 de Wit

 Posts list NVDA + Firefox
 https://www.youtube.com/watch?v=fEv6c-tGMaA

 Posts list NVDA + Chrome
 https://www.youtube.com/watch?v=yYZTVw_u5ok

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32152>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform