Support Center Visit Demo License manager Buy @ envato

Accessibility Issues with Mega Menu Tab Order

dojwebmasterdojwebmaster
in Menu / Mega menu

We have a website that uses BeTheme and needs to meet WCAG 2.0 Accessibility Standards.

When using only TAB and ENTER keys to navigate a webpage, Mega Menus in the top nav menu automatically open, and they open in the wrong location. The top left corner of each mega menu is anchored to the left edge of the corresponding menu button, meaning that large portions of each menu expand off of the screen. The background overlay also does not appear when mega menus automatically open when TAB keying through the top Nav Menu.

The desired behavior is to have top level menu items be highlighted when tabbing through content, and open only when the ENTER key is pressed on the corresponding menu item.

With mouse clicks, the Mega Menus are functioning properly, with each mega menu opening at full width and anchored to the left side of the screen.

In Theme Options>Accessibility, Keyboard Support is Enabled.

Thank you for your assistance, this is a major issue that prevents our website from complying with modern accessibility standards.

Comments

  • PhilPhil

    Hi,

    Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

    It is always a good idea to also attach a screenshot showing your issue.

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dojwebmasterdojwebmaster

    Hi, thank you for getting back to me.

    Our live site using BeTheme is https://mvdmt.gov/

    Upon loading the home page, press tab a few times to see improper mega menu function.

    BadMegaMenu.png

    Screenshot of Mega Menu opening in wrong location, with no content overlay present. Tabbing through Nav menu should not automatically open mega menus.

    GoodMegaMenu.png

    Screen shot of normal function of Mega Menu.

  • PhilPhil

    Do you have any regional restrictions set for your website?

    When I tried to access it, I got this:

    image.png

    If you can whitelist a country, we are located in Poland.


    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dojwebmasterdojwebmaster

    I am trying to get a temporary exception set up for you to access the site normally.

    However, if you can use a simply VPN and set your country of origin to the USA you can access the website?

  • PhilPhil
    edited April 4

    Thanks for the suggestion, we checked this, and will correct in the upcoming updates.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • dojwebmasterdojwebmaster

    Hi again,

    I was looking into this issue further and I was able to find a non-ideal way to disrupt the mega menus from automatically expanding on TAB focus and opening in the wrong location, while ENTER Key still works to open the menu in the correct position.

    I looked at the code in the BeTheme accessibility.js file, and can see that there are custom scripted Key Listeners for TAB and SHIFT + TAB. Around line 463, there is a case for TAB press on '.mfn-menu-link' , where mouseenter, hover and mouseover events are then triggered.

    For my menu, I have display submenu on click selected, so I wonder if the TAB triggering mouseenter, hover and mouseover events is potentially causing this issue. In my browser inspector window, I can remove the 'mfn-menu-link' class of a button for a mega menu and it stops the menu from opening on TAB. The Menu Items still work with ENTER and click, opening the menu in the correct position.

    Furthermore, I also checked out the behavior when Display submenu on hover is selected. In this case, the menu opens in the correct position when it is focused with TAB, so the listeners for mousenter, hover and mouseover must be responsible for positioning the menu correctly? (However, there are a number of other issues with mega menus when Display submenu on Hover is selected)

    On our website, the desired behavior for both Mouse and Keyboard users is to only show mega menus on mouse click or with Enter / Space Key Press on the parent menu button. By writing code to modify the output html of Betheme menu items, I could force the correct behavior, but this is a very hacky, non ideal situation.

    If you could pass this information along to your developers that would be great! Perhaps a check can be done before triggering the mouseenter, hover and mouseover events in the accessibility.js file, verifying whether or not display submenu on hover for the menu is selected?

  • PhilPhil

    Thanks for sharing.

    Just as before, I have passed your message to the dev team, and we will check that.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.