Keyboard navigation accessibility issue

Created on 2 March 2022, almost 3 years ago
Updated 27 March 2024, 8 months ago

Hi, we're using the Responsive menu along with mmenu lib to our website to generate the main menu for our site. Everything is working fine and the module is excellent.
The only issue, we find out during accessibility check during keyboard navigation is, user can not get out from the navigation by pressing the escape key. The menu always goes forward and user force to complete the navigation.
According to WCAG 2.1, any menu has to have an option for a user to escape from any submenu by pressing the escape button on the keyboard during the keyboard navigation. It's the compliance of 1.4.13 and failing this is the violation of the accessibility.
I think Responsive Menu already has this option and we're just missing to configure it correctly.
It would be great if you could let us know, is there any option we need to change to make it work?

Feature request
Status

Active

Version

4.4

Component

Code

Created by

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.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇨🇦Canada bisonbleu

    I second this request, accessibility is an important issue when dealing with government orgs.

    Setting to major because of WCAG 2.x requirements.

  • 🇬🇧United Kingdom maria.y

    Adding a bit more context, as I didn't understand the first few times I read this.

    This is regarding the horizontal (dropdown) menu

    The WCAG criteria referenced is 1.4.13 "Content on Hover or Focus" https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html which states that:

    Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
    Dismissible
    A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
    Hoverable
    If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
    Persistent
    The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

    The issue here is that the submenu appears on hover and focus, and you cannot dismiss it. Closing the submenu with the ESC key would resolve this issue.

Production build 0.71.5 2024