Category: Front End

Adobe has an active public repo for an accessible menu. It’s called “Mega Menu”. It’s adds classes, aria tags, and keypad controls for you! Here is the link for the js file. In my example I’ve assigned the classes hover, and open. You can use the enter, tab, and esc keys to go through the menus. I’ve included an example, and the code you’ll need below.

Here is a exmaple

You’ll have to add JS to target the menu, menu and sub-menus

$('.menu-primary-menu-container').accessibleMegaMenu();

setTimeout(function () {
	$('body').removeClass('init');
}, 500);

$(".menu-primary-menu-container").accessibleMegaMenu({
	/* prefix for generated unique id attributes, which are required
	   to indicate aria-owns, aria-controls and aria-labelledby */
	uuidPrefix: "accessible-megamenu",

	/* css class used to define the megamenu styling */
	menuClass: "navbar-nav",

	/* css class for a top-level navigation item in the megamenu */
	topNavItemClass: "menu-item-has-children",

	/* css class for a megamenu panel */
	panelClass: "sub-menu",

	/* css class for the hover state */
	hoverClass: "hover",

	/* css class for the focus state */
	focusClass: "focus",

	/* css class for the open state */
	openClass: "open"
});

Ensure the open class will show the sub-menu

.navbar-nav .sub-menu.open {
	display: block;
	opacity: 1;
	visibility: visible;
}