Problem/Motivation
In the context of the toolbar module, #3097907: Active toolbar tray has weak affordance and fails WCAG color criteria outlined the problems certain groups of people have to perceive the active toolbar tray. To a certain degree that problem applies to the navigation module as well, for certain groups of people and/or in certain contexts it is challenging to perceive which menu item is currently in the active state. There is no direct success criterion in the WCAG or any other spec I am aware of, the only recommendation I was able to find was in a tutorial for the W3C Web Accessibility Initiative (WAI) stating the following about the active state (https://www.w3.org/WAI/tutorials/menus/styling/#active-state):
Indicate the menu item that was activated through clicking, tapping, or keyboard selection. Users can identify unintended activation, for instance when they have clicked on the wrong menu item.
a) Top-level menu item in active state
How does a top level menu item in active state differ from those in none active state? There are two ways the difference is currently communicated:
| None active menu item | Active menu item | Color contrast | |
|---|---|---|---|
| Font color | #55565b (--admin-toolbar-color-gray-800) | #002e9a (--admin-toolbar-color-blue-700) | 1.5:1 |
| Background color | #FFFFFF | #f3f4f9 (--admin-toolbar-color-gray-050) | 1.1:1 |
Even though it seems that the active menu item label looks like using a bold typeface the font weight remains at 700, the same weight as menu items that are not in an active state. So basically the active state is communicated solely by color so SC1.4.1 applies, and due to the too low color contrast SC1.4.3 (for the font color) and SC1.4.11 (for the background-color) applies.
b) Top-level menu item in active state that is also added to the shortcuts
How does a submenu item in active state differ from those in none active state? There are two ways the difference is currently communicated:
| None active menu item | Active menu item | Color contrast | ||
|---|---|---|---|---|
| Font color | #55565b (--admin-toolbar-color-gray-800) | #0036b1 (--admin-toolbar-color-blue-600) | 1.3:1 | |
| blue dot | #FFFFFF | #002E9A | 11.3:1 |
Compared to the top-level menu items sub menu items aren't using a change of the background color to label the active menu item, instead a blue dot is used which is good. In regards of the text color there is the same problem of the same low color contrast (ref SC 1.4.3) that was already noted for top-level menu items.
c) Sub-menu menu item in active
There is one additional special third case. In the event of that a top-level menu item becomes active that is also added as a shortcut, the shortcuts group autoexpands using the pattern described in b) while the top-level menu item gets shown as active as well. That way you have two active menu items at the same time.
Strictly speaking probably correct but still a little bit confusing since the label for the top-level menu item in the current example is Content while the label for the shortcut is All content plus having two active elements at once is a source of potential confusion
Steps to reproduce
- Go to
/admin/appearance - Go to
/admin/structure/display-modes/form - Go to
/admin/content
Proposed resolution
- For top-level items (see point a) the option might be to increase the color contrast for the font color as well as the background color
- For sub menu items (see point b) the option might be to increase the color contrast for the font color
- About point c, In case the shortcuts group is collapsed keep it collapsed since the user already accessed one of its shortcut links. In case the user had the shortcuts group expanded maybe don't show the corresponding shortcut to the active menu item as active. And in case it was a submenu item that was accessed via a shortcut expand the nav so that sub menu item is shown (but also don't show the shortcut as active only the submenu item that is accessed).