Accessibility issue with menu and submenu keyboard navigation

Created on 21 January 2020, over 5 years ago
Updated 8 February 2023, over 2 years ago

I have been trying to create an accessible menu in Drupal 8 using Pixture Reloaded and Superfish menu with the following desired behavior:

• a tab to move from one top-level menu item to another;
• an enter to get into submenus;
up and down arrows to move within the submenu.

In short, the menu could follow practices described at https://www.w3.org/WAI/tutorials/menus/flyout/ or examples from https://a11y-guidelines.orange.com/web_EN/exemples/simple-menu/simple-me....

Currently, Superfish menu makes the user move not only through top-level items but to choose the first top-level item and then (using tab) the user gets straight to the first submenu. This behavior is not desirable as it is very time consuming for the user to get to the desired top-level menu item.

Is there a way to have a fully keyboard-accessible menu (with submenu items and without forcing the user to look at all the submenu items when he/she would rather see all top-level menu items first)?

Thank you in advance!

Linda

(I have asked this question also at https://www.drupal.org/project/pixture_reloaded/issues/3107193 but - giving it a second thought - I believe it is more of an issue related to the menu module rather than to theme.)

🐛 Bug report
Status

Active

Version

1.0

Component

Superfish Library

Created by

🇨🇿Czech Republic ljansova

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.

  • This is an accessibility feature I need as well, as the module doesn't meet current best practices for keyboard accessibility. The menu is slow to traverse without allowing users to skip the sub-menus.

  • 🇺🇸United States trishkaideka

    My team also needs the menu to be keyboard accessible with more up-to-date requirements.

    We have been using a patch that utilizes the JS from https://www.w3.org/WAI/tutorials/menus/application-menus-code/ .

    But it would obviously be better if this change was made on the module itself.

  • 🇺🇸United States emptyvoid

    Great example for the jQuery behaviors.
    have to successfully loaded it in a theme or custom module harness?

    Some notes on compliance I've researched are:
    Please note the navigation component provides both a desktop and mobile navigation interface and both will need to be audited, assessed, and development considerations applied to make it compliant.
    https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/me...
    https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/me...
    https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/me...
    https://www.w3.org/WAI/ARIA/apg/patterns/menubar/

    Navigation Menu Example:
    https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-naviga...

    I'll be evaluating version 8 and the 2 branch to determine if the JavaScript library and integration module for Superfish can support being fully compliant. Otherwise I'll have to research alternatives or (sigh) build a custom menuing module myself. :(

    Currently there are none, NO MODULE for menuing which is ARIA and 508 compliant with Keyboard or screen reader usability.
    Not even Drupal's Core menuing systems are compliant.

    This is pretty shameful considering the whole "accessibility" portal the Drupal Org and Acquia pushes. Sadly it is more FUD and advertising over actual action. Lots of words and little to no actual modules that are compliant.
    https://www.drupal.org/about/features/accessibility

    I guess it's left up to individuals to get it done.
    Now if it could actually be committed into official releases..

    I'll post any improvements or working custom modules that other cold leverage.

  • 🇺🇸United States emptyvoid

    Not that this helps with Drupal 10 or the never version.
    But here is a extension I built for Drupal 8.
    If I have a new version I'll release it here.

    https://github.com/ExeQutDev/superfish_aria

  • 🇺🇸United States emptyvoid

    Ok beta build of a Drupal 10 and 11 "add-on" module to run on top of the superfish module.
    Adds Aria attributes and toggled states onto menu elements.

    I attempted to use the totally undocumented tabbingmanager and it's useless.
    have some code in place that's commented out as I can't get it to work for more refined keyboard control.

    Right now it just allows a user to linearly tab through each menu item and sub-menu onto the next top menu item.
    Not great for very large menus for sure. But it at least works, as vanilla won't even be tabbed into with the keyboard.

    By all means, hack away and find a solution for the keyboard to provide the standards compliant interaction.

  • Status changed to Needs review 11 months ago
  • 🇺🇸United States jcandan

    Any reason this couldn't be submitted as a patch or merge request?

  • 🇺🇸United States bsnodgrass

    The comments on this one are pretty old. For those following, Is there anything new on this issue?

  • 🇺🇸United States emptyvoid

    Each release of the module seems to be a recompile using external compilers. So deconstructing the source to override and extend seems very challenging now.

    The previous "add-on" module won't work with the most current release. A cursory review it appears that structure and JS method names were changed.. But I'll have to confirm once I have time to devote to a rewrite. It may have to be rebuilt from the ground up.. provided every point release doesn't have major architectural changes..

    I am slated to work on this near the end of the summer based on a client paying for my time for their Drupal CMS. So I'll update once a new version is built.

    Because of the nature of the module it is an add-on.. I could create a sub folder called "modules" and place it bellow the main module in a copy of the dev branch and share a patch if the maintainers feel that would be helpful?

    Though it won't work with the most resent release..
    Hence why all of my clients using this extension add-on have locked the menu module since superfish 8.x-1.11.

  • 🇧🇪Belgium lobsterr

    I have plans to work on it and include it in the future releases, but our main goal was first reduce as much as possible the number of the bugs. I have closed recently a lot of the bugs and now probably the moment focus on this feature.

    @emptyvoid Any help from your side would be super useful!

Production build 0.71.5 2024