Accessible Mega Menu

  • Alex Davidson's picture
    Alex
    January 23, 2015

One of the frequent requirements of doing a website is that the website must be accessible. One sub-requirement of that means that the site should be navigable by keyboard. Lately, many websites have been utilizing a style of menu known as a mega menu. These are characterized by their large style dropdown that may or may not contain additional non-menu elements. But how does one make this menu accessible?

Enter Accessible Mega Menu

In 2013, Adobe released the Accessible Mega Menu library that helps to solve this. Utilizing this library, we could now put accessible mega menus on the website. There is an existing module on Drupal.org that provides support for this library inside Drupal, but, at the time, I didn't find that it easy enough to create mega menus -- it merely used the library to create a menu, not a mega menu per se.

Instead, I opted to create my own module that provided a brand new method for creating a mega menu. Borrowing ideas from the Special Menu Items module, I created a system to specify the blocks inside the menu that would then be rendered fully when outputting the mega menu and hidden otherwise. 

Right now, this module is only used internally, but we'd like to genericize it a bit more to allow it to be released on Drupal.org. Consider this a small sneak peak and be sure to check back later for the full release!