Comments display in edit.php can be improved for accessibility

[rianrietveld]

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>
		<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&amp;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?

[afercia]

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?

[joedolson]

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