WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 5 months ago

#33030 assigned defect (bug)

Admin menu update/comment count notification accessibility

Reported by: afercia Owned by: adamsoucie
Milestone: Future Release Priority: normal
Severity: normal Version: 4.2
Component: Administration Keywords: color-contrast has-patch needs-testing
Focuses: ui, accessibility Cc:

Description (last modified by rianrietveld)

In the admin menu, when there are updates or pending comments, they're notified to users with a small number in a colored circle. Red or blue depending which is the current active menu item.

From an accessibility point of view I can see three issues here:

  • color contrast (both #d54e21 and #00b9eb are under the required 4.5:1 ratio)
  • the numbers font size is really too small
  • the numbers are just... numbers and would need a more descriptive aria-label

About colors and font size, any change here would require design feedback so: designers welcome!

Screenshot for reference:

https://cldup.com/DmVt4KVWJM.png

Tracking label: #a11y-color

Attachments (1)

count-notification-a11y.33030.diff (2.8 KB) - added by adamsoucie 5 months ago.

Download all attachments as: .zip

Change History (18)

#1 @afercia
2 years ago

The blue one :)

https://cldup.com/KTt4jEytiw.png

#2 @rianrietveld
2 years ago

  • Description modified (diff)

#3 @afercia
2 years ago

Related: #29022.

#4 @deviodigital
2 years ago

What descriptive wording would you like to see? Something like "Pending 6" or different words for each one (Updates, Comments, Themes, Plugins).

I'm thinking something like the following could work well, but let me know if I'm far off course here.

UPDATES: Available updates
COMMENTS: Pending comments
THEMES: Available updates
PLUGINS: Available updates

Last edited 2 years ago by deviodigital (previous) (diff)

#5 @afercia
2 years ago

@deviodigital thanks for looking into this :) English is not my main language so I'm not sure. Ideally, this ticket should be coordinated with #29022 and maybe try to use the same strings used in the admin bar (the top toolbar). Less strings to translate, better consistency. Should also handle the plurals.

#6 @afercia
21 months ago

  • Keywords color-contrast added

#7 @afercia
21 months ago

Related: #31713.

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


17 months ago

#9 @rianrietveld
17 months ago

  • Milestone changed from Awaiting Review to Future Release

#10 @afercia
13 months ago

Related (for the admin bar): #26562

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


9 months ago

This ticket was mentioned in Slack in #accessibility by adamsoucie. View the logs.


5 months ago

#13 @afercia
5 months ago

  • Owner set to adamsoucie
  • Status changed from new to assigned

#14 @adamsoucie
5 months ago

  • Keywords has-patch added; needs-patch removed

First go-around with a patch. Updated the colors using the official WP colors and added some ARIA labels.

#15 @adamsoucie
5 months ago

  • Keywords needs-testing added

This ticket was mentioned in Slack in #accessibility by adamsoucie. View the logs.


5 months ago

#17 @Cheffheid
5 months ago

I took a bit of a look at this patch, and the colour changes are a good start :thumbsup:

There are a few things that are missing or just not working properly just yet:

  • The aria-label replaces the text completely, so just having it announce "Number of Plugins Needing Updates" isn't complete and the actual number will need to be part of it too.

http://i.imgur.com/QdGXl5X.png

  • There is the "global" Updates link (in the Dashboard submenu) that seems untouched by the aria-label changes, but this would also need the same labeling treatment.
  • The increase in the font size made the bubbles a bit more oval. They weren't perfect circles before, but due to the increased size this is now a bit more noticeable than before. The extent also varies based on the number it looks like. But maybe I'm just nitpicking. :)

http://i.imgur.com/6EmgHE8.png http://i.imgur.com/SLGKR3k.png

Note: See TracTickets for help on using tickets.