Contrib.social

Make the active menu item visually stand out more

Open on Drupal.org →
Created on 7 March 2024, 11 months ago
Updated 5 August 2024, 6 months ago

Problem/Motivation

In the context of the toolbar module, 🐛 Active toolbar tray has weak affordance and fails WCAG color criteria Needs work 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:

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:

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

Update the current styles with the new designs:

Link to the designs on Figma.

User interface changes

The active state for the Navigation items will change.

Before:

After:

📌 Task
Status

Needs work

Version

11.0 🔥

Component
Navigation  →

Last updated about 1 hour ago

No maintainer
Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024