Opened 10 years ago
Closed 10 years ago
#31369 closed defect (bug) (duplicate)
Comments display in edit.php can be improved for accessibility
Reported by: | rianrietveld | Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | |
Component: | Comments | Keywords: | |
Focuses: | accessibility, administration | Cc: |
Description (last modified by )
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:
- 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.
- 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?)
- 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?
Update:
about 1. a screen-reader-text "Comments" was added in the table headers in r31513
by the way I would still consider to just use a plain link text "Comments" and remove the icon and title attribute.
Accessibility team: maybe we forgot this ticket and after the accessibility testing session dedicated to the posts screen we opened a new ticket with new data and videos see #32152. Also the contrast ratio issue has now its specific ticket, see #31713. Worth considering to close this one?