Make JetMenu Mega Menu Accessible

[sausagebeansandchips]

Hi

With increased need for WCAG compliance worldwide, it is necessary that navigation menus be accessible. Currently the JetMenu Mega Menu does not appear to be accessible. It isn't possible to use the menu with a keyboard and it is missing the aria labels. There may also be other items necessary to make it accessible.

Can you please make the plugin accessible.

Thanks!

[iamdanbarrett]

+1

[cirkut]

Would like to add on this that at the very least keyboard navigation is an absolute must. Not only for accessibility, but for general usability. Seems weird that this is built to currently only work with hover instead of hover/focus. I'm currently working on shimming this on my own installation, but it would be great to have it working natively!

Edit: From a basic level, I've added some JavaScript that can add basic keyboard navigation that allows you to use the tab key to traverse through the menu and the open menu items. Here's the gist. This isn't a complete solution and there's a ton more work that Crocoblock needs to work on, but this will get you minimally there where technically keyboard users will be able to use your menu like a mouse-capable user.

[blb48]

Would like to add on this that at the very least keyboard navigation is an absolute must. Not only for accessibility, but for general usability. Seems weird that this is built to currently only work with hover instead of hover/focus. I'm currently working on shimming this on my own installation, but it would be great to have it working natively!

Edit: From a basic level, I've added some JavaScript that can add basic keyboard navigation that allows you to use the tab key to traverse through the menu and the open menu items. Here's the gist. This isn't a complete solution and there's a ton more work that Crocoblock needs to work on, but this will get you minimally there where technically keyboard users will be able to use your menu like a mouse-capable user.

This x1000. There's no excuse for this lack of basic accessibility in 2021. Thank you for the gist, @cirkut; JetMenu has since updated their class names but it wasn't difficult to update the script to match.

[robertagallo]

Thank you both!

Would you please consider sharing those code changes on here for everyone including myself to benefit from, @blb48?

The accessibility community (us actually working and pushing on this) need to work together to make these companies include a focus on important matters like these. Literally, the way it seems to be, every single website built with Elementor, Oxy, etc. is not compliant and even SasS like Userway supposedly only accounts for 30 - 40% of the compliance needed.

As a side note, and personally, this is making me really rethink building WordPress websites for the past 8 years in general and going back to HTML, CSS, & JS builds to niche down.

[cirkut]

@blb48 Are you sure the class names have been updated? The site this is running on is fully up to date with JetMenu and Elementor and the script in my gist still works as intended.

Of course there's still a ton of work that can be done for greater accessibility, but basic keyboard navigation gets us 90% of the way there (for JetMenu anyways).

[pedrostein]

• +1 as accessibility is gaining more interest

[glampe]

+1 This is really important.

[GrantDesigns]

Is there any update on this? Accessibility is very much required. Whilst I can tab through the site, nothing happens on hitting Enter.

[e-cubed]

+1 I can tab through the menu, but it doesn't work when pressing enter. Though when I keep tabbing, it looks like it loops back which then pressing Enter does work.

[kariekameleon]

I tried this and it seems to be working

document.querySelectorAll('.jet-mega-menu-item__inner').forEach((item, index) => {
// Setting tabindex starting from 1 (1-based index)
item.setAttribute('tabindex', index + 1);
});

[PERMI-Design]

+1