[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          |  Resolution:
 Keywords:                  |     Focuses:  accessibility
----------------------------+------------------------------
Description changed by joedolson:

Old description:

> 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?

New description:

 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 bubble with the number of comments
 and not combine the lot in one bubble?

--

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