I recently completed a project where I was tasked with creating a mega menu but was also afforded time to focus on website accessibility. Sure, I knew of the value of HTML5 validation, image alt tags, and including a skip navigation button, but during my research this video inspired me to give up icon fonts and try to include ARIA roles in my code.
In keeping with this accessibility-conscious kick, I sought a mega menu navigation that supported ARIA roles. I ultimately came across Adobe’s mega menu from 2013. While I uncovered other JQuery mega menus, I still consider this one to be one of the best examples of a working mega menu that’s also accessible (see Adobe’s Github repo).
My only gripe was that their example wasn’t responsive. After sifting through forks looking for a reliable example, I went ahead and made my own fork to make this responsive accessible mega menu. Here’s a working example of the fork.
The object arguments for the accessibleMegaMenu() constructor are a bit excessive, but I’ve kept with Adobe’s pattern in an effort to make the code as approachable as possible. I added three major arguments:
- navToggle – The id selector of the element triggering the mobile menu toggle
- navId – the id selector of the navigation
- mobileBreakpoint – The breakpoint at which the navigation toggles to mobile.
The last one, mobileBreakpoint, is perhaps the biggest change, as it’s referenced in conditionals throughout jquery-accessibleMegaMenu.js to determine whether navigation items behave on click or hover.
Have a look, and make it your own.