WordPress.org

Make WordPress Core

Opened 5 years ago

Last modified 5 years ago

#31369 closed defect (bug)

Comments display in edit.php can be improved for accessibility — at Version 1

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

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

  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 (1)

#1 @joedolson
5 years ago

  • Description modified (diff)
Note: See TracTickets for help on using tickets.