List table: Comments column accessibility improvements

[afercia]

Reported by (and thanks to!) our testers in ​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:

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

[afercia]

Additionally, when there are "0 approved and 0 pending" comments, maybe the comments "bubble" shouldn't be a link to the comments listing screen. There's no point in getting to a screen where the only information available is: "No comments found", unless I'm missing something.

[afercia]

first pass

[afercia]

Attached patch is a first pass. About the visual part... designers: pretending you don't see this :) I'm not a designer, I'm sure you can come up with a far better proposal.
About the accessibility part, please notice in the screenshot below how the comment count is read out (ChromeVox). When there are no comments (0 approved and 0 pending) there's no link, to reduce noise. Colors have now a sufficient contrast ratio and about the grey please see #31713.
Any thoughts more than welcome, for example about the translatable string. Probably the PHP part could be also a bit simplified.

[joedolson]

Probably needs some design people to sound off, but from an accessibility perspective I think this is great.

[afercia]

Replying to joedolson:

Probably needs some design people to sound off, but from an accessibility perspective I think this is great.

Sure, about the visual part we're making a call for designers to step in! :)

[sharonaustin]

Image OrYl2qnPrQ.png with color removed

[sharonaustin]

This is such stunning work by the accessibility team; I am always in awe and appreciation of what's being done here by these great people in accessibility, and by WordPress in general.

As far as the "split bubbles" are concerned, consider the fact that the colors used, although they have great contrast between the background and the number of comments, do not have sufficient contrast between each other. A person with color-blindness would not be able to tell the difference.

Visually speaking, the numbers run together, and become confusing. The numbers could easily appear as "18.1" instead of "18" and "1", and "93" instead of "9" and "3" to those with poor vision. This "visual miscommunication" is made more likely to occur because the numbers are horizontally side-by-side, where English speakers, at least are taught to "read" text as one unit. If designers choose to pursue a split bubble, consider putting one number on top and another on bottom, rather than side-to-side, to help inform a reader that the numbers are distinct.

Again, thank you so much for all the hard work. I am really in awe of the tremendous work being done by all here, and hope to contribute in some small way to the process.

[afercia]

@sharonaustin hi, yeah very good point :) In a first moment I was thinking to just use a slash / to separate the two numbers and that's still a viable option. Could be also generated via CSS. About the visual part, it's definitely waiting for design feedback and I see one designer following this ticket :)

[joedolson]

#31369 was marked as a duplicate.

[joedolson]

Patch still applies after latest changes to List Tables, (see r32721 and following, r32736 and following, r32752 and following.)

[karinchristen]

Comments-list counts with text links

[karinchristen]

On comments list:
We could use the bubble to display all comments and show the pending and approved info within text.
The pending info should be displayed first as this is an info where an action is needed.

See the detailed screenshot below:

On posts list:
It will work if the list has enough space otherwise it will end up in a word break, see screenshot:

Responsive View
Regarding the new responsive view as discussed here: https://core.trac.wordpress.org/ticket/32395#comment:31 this should work too, see screenshot:

[helen]

In 32991:

List tables: Bring screen reader text for comments column title to media.

see #32152, [31513].

[hugobaeta]

The approach @karinchristen posted is what we discussed during WCEU contributors day. There was a lot of discussion around this, sketches, and ultimately this solution that I'm 100% behind – it removes the confusion to what the comment bubble number means (by having a total in there), and provides a very explicit set of actionable information (that is more accessible, easy for translation, etc). The only issue is on some views (the post/page list table for example) where the column is rather tight for so much text. Maybe we could use the solution ​proposed in slack by @picard102 of a notification bubble (but we'd have to test that because of the small size):

Props to the fresh newcomers involved in the discussion during WCEU: @karinchristen, @shortied, and @aliyanage :)

[picard102]

Just mocked this up in browser, could use some finessing, but the idea is there.
While the text option seems superior for a number of reasons, the list table view can get very tight, and a graphical representation works better in cases where there is a size constraint, and looks less messy to my eye.

[ShortieD]

Replying to picard102:

Just mocked this up in browser, could use some finessing, but the idea is there.
While the text option seems superior for a number of reasons, the list table view can get very tight, and a graphical representation works better in cases where there is a size constraint, and looks less messy to my eye.

@picard this option looks great too

• I guess the main point it to be able to click or tap on either of the numbers easily so the user can filter the posts by either comment amounts (eg go to the total number of comments and view or go to the pending comments and process). So some testing would be helpful to see if this size suitable. Also as a link - we'd have to make sure both options were able to be focussed on keyboard tabs.

[picard102]

Comment Count Badge Design

[picard102]

Added a patch with the badge idea worked out.

Replying to ShortieD:

@picard this option looks great too

• I guess the main point it to be able to click or tap on either of the numbers easily so the user can filter the posts by either comment amounts (eg go to the total number of comments and view or go to the pending comments and process). So some testing would be helpful to see if this size suitable. Also as a link - we'd have to make sure both options were able to be focussed on keyboard tabs.

Currently the link is to view all comments for the post, it doesn't filter them into approved and unapproved.

[picard102]

Removed pending count if 0. Screen reader text could be improved here, but not sure how.

[afercia]

Nice to see all the new proposals and thanks to all the new contributors :) From an accessibility point of view plain text would always be the best option but we can improve accessibility also for a "graphic" solution, as shown in the third comment.
Please consider in both cases orange is a very difficult color, almost impossible to have a minimum color contrast ratio of 4:5 unless it's turned in an "almost brown" or "almost red".

Visually, I like the notification badge. Maybe it wouldn't be so clear what the number in the gray bubble represents: total? Approved ones?

Also, the gray should be changed in order to have a sufficient contrast ratio. Currently, both in the Posts and in the Comments list the bubble is blue when there are pending comments and gray otherwise. What would you recommend here? Maybe just always use the blue?

[picard102]

Replying to afercia:

Nice to see all the new proposals and thanks to all the new contributors :) From an accessibility point of view plain text would always be the best option but we can improve accessibility also for a "graphic" solution, as shown in the third comment.
Please consider in both cases orange is a very difficult color, almost impossible to have a minimum color contrast ratio of 4:5 unless it's turned in an "almost brown" or "almost red".

Visually, I like the notification badge. Maybe it wouldn't be so clear what the number in the gray bubble represents: total? Approved ones?

Grey would be approved, badge would be unapproved.
Have a hard time wrapping my head around showing a total (approved+pending) while showing one of those values beside it.

Also, the gray should be changed in order to have a sufficient contrast ratio. Currently, both in the Posts and in the Comments list the bubble is blue when there are pending comments and gray otherwise. What would you recommend here? Maybe just always use the blue?

In my patch I just used the colours from other parts of the theme, the orange for example is the same orange as the badge in the admin menu.

Is there a set of colour variables I should have referenced? Or is that something that's being worked on in another ticket?

[afercia]

Replying to picard102:

In my patch I just used the colours from other parts of the theme, the orange for example is the same orange as the badge in the admin menu.

Is there a set of colour variables I should have referenced? Or is that something that's being worked on in another ticket?

Yup I know, that colors should be reviewed too. @hugobaeta did a great work about colors recently and they're listed here: ​https://make.wordpress.org/design/handbook/foundations/colors/
No official accessibility audit till now, there's just one tracking ticket, see: #31713

[hugobaeta]

Replying to afercia:

Please consider in both cases orange is a very difficult color, almost impossible to have a minimum color contrast ratio of 4:5 unless it's turned in an "almost brown" or "almost red".

So, I ended up creating a new value for this, since the Fire Orange in the handbook only passes AA ith large text. So I created a new shade of fire orange (a 5% shade): #CA4A1F - this color has a 4.66:1 contrast ratio with white text on it.

I updated my codepen with the new colors, and will update the Handbook as soon as I have a chance: ​http://codepen.io/hugobaeta/full/RNOzoV/

Visually, I like the notification badge. Maybe it wouldn't be so clear what the number in the gray bubble represents: total? Approved ones?

I agree, and part of this is being consistent. I think we should do text whenever possible, like the proposal from the WCEU group. In posts/pages lists, when the column is tight, we can do the bubble version.

IMO the gray bubble should then always represent approved comments, no matter what context it is in. That means that we might have to eventually make some change to the comment bubble on the adminbar...

Also, the gray should be changed in order to have a sufficient contrast ratio. Currently, both in the Posts and in the Comments list the bubble is blue when there are pending comments and gray otherwise. What would you recommend here?

I'd rather use the gray consistently, and only draw in attention to the pending bubble with the Orange mentioned above. So, I added a new "Medium Gray" #72777C to my ​codepen of colors. This new Medium gray is a tone with 20% Base Gray on Dark Silver Gray. I made this up to a point where I'd get a AA pass, 4.52:1.

Eventually I'll need to run a big sweep of the grays and start making them more consistent, but that will be a battle for the future ;) Hope this helps!

[afercia]

Replying to hugobaeta:

Hope this helps!

Helps Alot :) Thanks!

[afercia]

Replying to hugobaeta:

IMO the gray bubble should then always represent approved comments, no matter what context it is in.

OK, so in the textual version we don't need the bubble at all, since there's already the "nn approved comments" text.

New patch (first pass), trying to have some progress. Please notice it's just a first implementation and everything can be changed, refined, discussed. Need to:

• make a decision about the media query breakpoint
• make a decision about hover/focus styles
• make a decision whether to remove/change the edit/view post links in the comments screen
• keep or remove the word "comments" in the text string? Also, we could shorten the "No approved comments" and "No comments" strings
• test in different languages for the text strings length, the column width might need adjustments
• refine and better organize the CSS, many things are temporary waiting for decisions to be made

I've added a subtle box-shadow to the pending count circle, just experimenting and can be removed.

@picard102 I've temporary turned the 8 decimals values in pixels, it's easier having pixels while we're developing and we can eventually turn them back in 8 decimals when we're done, if necessary.

Probably I would pair the textual/graphics switch in the column header in order to have a text string "Comments" on large screens and the icon on smaller screens.

There's a main issue:

• when sorting the comments column, the "orderby" is by "approved" comments and should be by "approved + pending" sub-total. As I see it, we should definitely change this. Not sure how to do it though. cc @helen :)

[picard102]

I'm not a fan of the text implementation on the list-tables view. The number of columns that end up occupying this table as a result of plugins, and even stock install, really crowd things and make it visually harder to process all the information IMO. I'd rather the text version only be on mobile where the columns are linearized and the edit-comments tables where there is plenty of room.

[afercia]

Replying to picard102:

I'd rather the text version only be on mobile where the columns are linearized

I could agree. The current breakpoint at ( max-width: 1120px ) is temporary and completely arbitrary :) Now that we have the two things implemented, I'd say it just need a design decision.

[picard102]

Patch for style and context suggestions

[picard102]

A patch re: my suggestions about the context of the text vs icon approach.
Also in this patch is a change to the string outputted for the screen reader text.
IMO if there are no unapproved comments, the text should read "1 comment" rather than "1 approved comment".
Only place that splitting it out like that makes sense to me is in context of approved/pending.

Comment-edit view is still terrible.
But I think this is the best we can do short of a much larger conversation about this table layout.

[hugobaeta]

As ​discussed in slack, @picard102 will do another pass at the patch to fix a positioning bug, add a space between approved and pending strings in the narrow screen media query, and to remove the gray bubble in case of zero comments (unless there are comments pending), replacing it with a — to make this consistent with the other columns with no items (like tags, or categories):

Love watching this ticket get closer to it! Thank you for the hard work!

[picard102]

Removed zero count to be more consistent with how it's displayed elsewhere. Fixed some alignment bugs.

[helen]

I like this a lot, though it exposes the comment count ordering is weird (#32953). Patch comments:

• The pending circle should come after the approved comments bubble in the markup/output. The tab order feels strange otherwise. I imagine this will take some CSS tweaking :)
• Move the opening strong tag to where the rest of the output is.
• The contents of the new media query block in the CSS should go into the existing media query block, since it's related to what's already in there and will help us avoid potential cascade issues as time goes on.
• Don't do comparisons against $*_comments_number since that's a translated value. Use the originals instead.
• Since the various $*_output strings are used only once, let's just output them where they're used. I haven't traced it all the way yet, but even the two different $no_comments_output strings should probably just be output when needed and those later conditionals for output consolidated and made more clear for the future. I missed that it was two different sets of if statements while I was reviewing.
• There are some whitespace issues, and for any single line conditionals that are affected, please add braces while we're here.

[afercia]

Replying to helen:

• The pending circle should come after the approved comments bubble in the markup/output. The tab order feels strange otherwise. I imagine this will take some CSS tweaking :)

Yup, the reason why the pending link comes first in the markup is what was suggested in comment 29. On the other hand, placing it after could help avoiding a float drop when there are lots of comments. See screenshot below. The column width would need some adjustment though (tricky because the table has table-layout: fixed;) or the comments count would need a different displaying when above a certain amount of comments. See discussion on Slack: ​https://wordpress.slack.com/archives/design/p1436481355001562

[afercia]

Refreshed patch. Tried to simplify and clean up a bit. Also, removed the strong as it seemed no more necessary to me. If we want bold, we should use CSS. Increased the column width to 6em but it still needs a more robust solution. Would need some help to review this, especially the part with simplified conditionals and printfs :)

[helen]

Vizrecs: ​https://make.wordpress.org/flow/2015/07/10/comment-bubble-enhancements-for-accessibility-and-usability-32152/

[helen]

In 33155:

List tables: Better accessibility and design for the comments bubble.

It is now plain text in the comments list table's "In Response To" column, where it was visually a bit confusing to have the bubble. For other list tables, it now shows a little notification bubble with the number of pending comments. The bubble and notification become plain text in the responsive list table view. It also shows no bubble when there are no comments at all, reducing some of the visual noise.

props picard102, afercia, karinchristen.
fixes #32152.

[iseulde]

In 33453:

Remove broken/dead colour scheme code

See #32152.

[SergeyBiryukov]

In 40960:

Administration: In WP_List_Table::comments_bubble(), replace the mdash with its HTML entity for consistency with the similar code in other list tables.

Props afercia.
See #40659, #32152.