[wp-trac] [WordPress Trac] #31369: Comments display in edit.php can be improved for accessibility

[WordPress Trac]

#31369: Comments display in edit.php can be improved for accessibility
----------------------------+-----------------------------
 Reporter:  rianrietveld    |      Owner:
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:  trunk
 Severity:  normal          |   Keywords:
  Focuses:  accessibility   |
----------------------------+-----------------------------
 In edit.php the table with the listing of the posts has a column with
 links to the comments of a post.
 The current construction can be improved for screen reader users and for
 people with trouble seeing low contrast.

 There are 3 issues

 1. The column heading only contains an icon.
 The text Comments is put in the title attribute of the span containing the
 number. A title attribute is often not read by screen readers.
 {{{
 <th scope="col" id="comments" class="manage-column column-comments num
 sortable desc" style="">
         <a href="[..]/wp-
 admin/edit.php?orderby=comment_count&order=asc">
         <span>
                 <span class="vers">
                         <span title="Comments" class="comment-grey-
 bubble"></span>
                 </span>
         </span>
         <span class="sorting-indicator"></span>
         </a>
 </th>
 }}}
 This can be solved by adding the text "comments" in a screen-reader-class
 span (yet another span?)
 Or remove the icon and put the text Comments there, just like all the
 other table headings are written out, like
 {{{
 <th scope="col" id="comments" class="manage-column column-comments num
 sortable desc" style="">
         <a href="[..]/wp-
 admin/edit.php?orderby=comment_count&order=asc">Comments</a>
 </th>
 }}}
 The last option need a wider column, which is a disadvantage.

 2. The table cel with the link to the comments only contains a number
 And because the <th> has no text content and the <td> only a number,
 screen-reader users can't tell what this links are about.
 The amount of pending comments are put in the title attribute of the link.
 A title attribute is often not read by screen readers.
 {{{
 <td class="comments column-comments">
         <div class="post-com-count-wrapper">
                 <a href="[..]/wp-admin/edit-comments.php?p=131" title="0
 pending" class="post-com-count">
                         <span class="comment-count">1</span>
                 </a>
         </div>
 </td>
 }}}
 This can be solved by adding the text "comments" and the amount of pending
 comments in a screen-reader-class span (yet anaother span?)

 3. Colour
 The colours of the current bubble / text are #bbb/#fff. Contrast ratio is
 1.92:1. This should be 4.5 or higher, so change #bbb into 767676

 If there are pending comments the colour changes in 0073aa. Contrast
 Ratio: 5.21:1, that is good.
 But if there are pending comments is now only visible by change of colour,
 and if the normal coulored bubbles are changed into for example 767676 the
 difference will even be harder to see.
 Maybe add this information below the ballon with the number of comments
 and not combine the lot in one bubble?

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