Make WordPress Core

Opened 6 years ago

Closed 6 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 joedolson)

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&amp;order=asc">
		<span class="vers">
			<span title="Comments" class="comment-grey-bubble"></span>
	<span class="sorting-indicator"></span>

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&amp;order=asc">Comments</a>

The last option need a wider column, which is a disadvantage.

  1. 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>

This can be solved by adding the text "comments" and the amount of pending comments in a screen-reader-class span (yet anaother span?)

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

Change History (5)

#1 @joedolson
6 years ago

  • Description modified (diff)

#2 @SergeyBiryukov
6 years ago

  • Component changed from Administration to Comments
  • Focuses administration added

#3 @DrewAPicture
6 years ago

  • Version trunk deleted

#4 @afercia
6 years ago

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?

#5 @joedolson
6 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Yes, I think this is really a duplicate at this point. Closing as duplicate of #32152; also see #31713.

Note: See TracTickets for help on using tickets.