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

[WordPress Trac]

#32152: List table: Comments column accessibility improvements
-----------------------------------+--------------------------------
 Reporter:  afercia                |       Owner:  afercia
     Type:  defect (bug)           |      Status:  assigned
 Priority:  normal                 |   Milestone:  4.3
Component:  Comments               |     Version:  4.2
 Severity:  normal                 |  Resolution:
 Keywords:  has-patch ui-feedback  |     Focuses:  ui, accessibility
-----------------------------------+--------------------------------

Comment (by hugobaeta):

 Replying to [comment:38 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 [http://codepen.io/hugobaeta/full/RNOzoV/
 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!

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