Make WordPress Core

Opened 9 years ago

Closed 6 years ago

Last modified 6 years ago

#33030 closed defect (bug) (fixed)

Admin menu update/comment count notification accessibility

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 5.2 Priority: normal
Severity: normal Version: 4.2
Component: Administration Keywords: color-contrast has-patch
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 (5)

count-notification-a11y.33030.diff (2.8 KB) - added by adamsoucie 7 years ago.
33030.diff (14.5 KB) - added by afercia 6 years ago.
33030-updates.diff (9.9 KB) - added by afercia 6 years ago.
bubble font size before after.png (11.7 KB) - added by afercia 6 years ago.
33030.2.diff (14.5 KB) - added by afercia 6 years ago.

Download all attachments as: .zip

Change History (41)

#1 @afercia
9 years ago

The blue one :)

https://cldup.com/KTt4jEytiw.png

#2 @rianrietveld
9 years ago

  • Description modified (diff)

#3 @afercia
9 years ago

Related: #29022.

#4 @deviodigital
9 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 9 years ago by deviodigital (previous) (diff)

#5 @afercia
9 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
9 years ago

  • Keywords color-contrast added

#7 @afercia
9 years ago

Related: #31713.

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


8 years ago

#9 @rianrietveld
8 years ago

  • Milestone changed from Awaiting Review to Future Release

#10 @afercia
8 years ago

Related (for the admin bar): #26562

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


8 years ago

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


7 years ago

#13 @afercia
7 years ago

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

#14 @adamsoucie
7 years 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
7 years ago

  • Keywords needs-testing added

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


7 years ago

#17 @Cheffheid
7 years 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

This ticket was mentioned in Slack in #design by boemedia. View the logs.


6 years ago

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


6 years ago

#20 @afercia
6 years ago

  • Keywords needs-refresh added; needs-testing removed
  • Milestone changed from Future Release to 5.2
  • Owner changed from adamsoucie to afercia

Discussed during today's accessibility bug-scrub, and agreed to try this for 5.2.

#21 @afercia
6 years ago

Re: color contrast: when the "bubble" is displayed on an active menu item, it's blue instead of red:

http://cldup.com/KTt4jEytiw.png

The color contrast is really too low. Using a darker blue wouldn't be so appropriate because it will be barely distinguishable from the menu item background. On the other hand, I'm not sure why the bubble color should change in the first place.

Regardless, if keeping the blue background is desired, then it should use a lighter blue to allow to use a black text. Alternatively:

  • it could just stay red
  • use a transparent background with a white border
  • just use the menu background color, as for some of the alternate color schemes (personally I think this would be the best option)

http://cldup.com/NPBssa46bQ.png

Last edited 6 years ago by afercia (previous) (diff)

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


6 years ago

@afercia
6 years ago

#23 @afercia
6 years ago

  • Keywords needs-refresh removed

33030.diff addresses only the Comments and Privacy Policy "bubbles", I'd appreciate some preliminary testing on it. For better clarity, I'll prepare a separate patch for the Updates (Plugins etc.) as they're a bit more complicated and overlap with #29022.

  • uses the same string for the "Comments in moderation" (also in the dashboard widget, see screenshot below)
  • this simplifies things and allows to dynamically change the strings in an easier way
  • introduces an updateInModerationText JS simple function, responsible to update all the Comments strings
  • makes the bubble and their text slightly bigger
  • improves the active item bubble contrast by using the menu background color, pending design feedback

Testing welcome!

Note: the visually hidden text is always updated based on the data from the Ajax response. Instead, the visible numbers are still updated via the old method, based on calculations made on data fetched from the markup. The old method calculation fails in some edge cases and should probably be reviewed in a separate ticket.

#24 @afercia
6 years ago

33030-updates.diff explores a way to update the strings for the plugins, themes, core, and translations updates. It works when updating plugins from the Plugins page. Can't work when updating from the Updates page, because of the iframe method used there which is also the reason why #29022 is blocked.

Will report on #29022, as seems to me that's the more appropriate ticket. Any help would be appreciated :)

#25 @tinkerbelly
6 years ago

My vote here would be for option #2 (keeping the badge red), mostly because it maintains consistency with the appearance of this bubble in other states. It's a bit of a stark colour difference against the blue, and an argument could probably be made for making these notification badges a bit less severe overall, but that's a whole other discussion!

For this change, I'd recommend maintaining consistency across states and always having the notification badges in red.

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


6 years ago

#27 @afercia
6 years ago

Re: the visual part, the patch also slightly increases the bubble size and the font-size. The current 9 pixels font-size is really too small for today's screens. See screenshot attached below.

This ticket was mentioned in Slack in #design by boemedia. View the logs.


6 years ago

#29 @picard102
6 years ago

I like option 4 visually, but option 2 makes more sense as @tinkerbelly points out.

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


6 years ago

#31 @afercia
6 years ago

@tinkerbelly @picard102 thanks for the feedback. Will make them red, then. Worth noting having a different color for the active "bubble" isn't entirely new in WordPress. The alternate color schemes change their color. For example, this is what "Midnight" does:

http://cldup.com/znkp6W2UiS.png

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


6 years ago

@afercia
6 years ago

#33 @afercia
6 years ago

33030.2.diff refreshes the patch and includes the bubble color change:

  • uses everywhere the same string %s Comment in moderation', '%s Comments in moderation so it can be updated in bulk
  • introduces an updateInModerationText JS simple function, responsible to update all the related strings
  • adds a visually hidden text "1 Privacy Policy update" to the Privacy menu items bubble
  • adds/improves translators comments

Changes that apply to all the bubbles (Updates, plugins, etc.)

  • makes the bubbles and their text slightly bigger
  • improves the active menu item bubble contrast by changing the background color to red (option 2 in the screenshot attached in a previous comment)

#34 @afercia
6 years ago

Note for history: the #d54e21 red color mentioned in the ticket summary was changed in [41362] to #ca4a1f, which has a sufficient color contrast with the white text.

#35 @afercia
6 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 44924:

Accessibility: Improve the Comments and Privacy count text.

  • standardizes the Comment count string to %s Comment in moderation', '%s Comments in moderation so it can be bulk-updated
  • adds the string as visually hidden text in the admin menu
  • introduces an updateInModerationText JS simple function, responsible to correctly update all the related text using the data from the AJAX response
  • adds a visually hidden text "1 Privacy Policy update" to the Privacy menu items count
  • adds/improves translators comments

Changes that apply to all the count bubbles (Updates, plugins, etc.)

  • makes the bubbles and their text slightly bigger
  • improves the active menu item bubble contrast by changing the background color to red (option 2 in the screenshot attached in a previous comment)

Props adamsoucie, afercia.
Fixes #33030.

This ticket was mentioned in Slack in #core-privacy by garrett-eclipse. View the logs.


6 years ago

Note: See TracTickets for help on using tickets.