The term “Web accessibility” refers to the practice of designing the Web so that everyone regardless of hardware, software, physical or mental impairment can use it to the same extent or degree. To truly design the Web to be accessible, the barriers that might prevent users from having equal access to the information and functionality it contains must be removed.
Mega menu is a phrase typically defined as a drop down interface, triggered by hovering over a defined element or area, that categorizes navigation elements by relation. The use of mega menus to provide users a multitude of options dates back to the beginnings of graphical user interfaces (GUI) in computer programming and is still very popular today. Easy organization of data and visibility are two attributes that might make the application of a mega menu intriguing for a developer.
Developers that have worked on WordPress websites that require large navigation menus know many mega menu solutions are available in the Plugin Directory. Unfortunately, these plugins are rarely specialized and usually do not conform to Web Content Accessibility Guidelines (WCAG) 2.0 which is a World Wide Web Consortium (W3C) international standard.
Luckily, there is an open-source approach to building a WCAG 2.0 AA mega menu with very little scripting involved. This approach calls for the use of Adobe’s Accessible Mega Menu jQuery plugin and some native WordPress methods. Here are the steps:
Using the wp_enqueue_script() function, make sure that some version of jQuery has been loaded. Since jQuery ships natively with WordPress, all you need to do is bind the script with this line of code:
wp_enqueue_script( 'jquery' );
Note: The ‘jquery’ handle is case sensitive in this context. Using `jQuery` will not work!
Next, use the same function to add the Accessible Mega Menu plugin. Be sure to place this line of code below the jQuery enqueue and make the script a dependency to jQuery:
wp_enqueue_script( 'jquery-accessiblemegamenu',
get_template_directory_uri() . '/js/Accessible-Mega-Menu/jquery-accessibleMegaMenu.js',
array( 'jquery' ), null, 'all' );
Finally, call the wp_nav_menu() function to output the HTML markup for your mega menu. Make sure to match its markup to the structure expected by the Accessible Mega Menu demonstrated below:
<nav>
<ul class="nav-menu">
<li class="nav-item">
<a href="?movie">Movies</a>
<div class="sub-nav">
<ul class="sub-nav-group">
Your function call will resemble this:
<?php
$args = array(
'theme_location' => 'primary',
'menu' => 'Primary Menu',
'menu_class' => 'nav-menu',
'container' => 'nav',
'container_id' => 'megamenu',
'items_wrap' => '<ul class="%2$s">%3$s</ul>',
'depth' => 3,
'walker' => new Accessible_Walker_Class()
);
wp_nav_menu( $args );
?>
That’s it! With the general functionality being handled by the JavaScript plugin, all that is left to do is style the menu. The Accessible Mega Menu supports keyboard interaction modeled after behavior described in the WAI-ARIA Menu design pattern and general user expectations for the behavior of links in a global navigation, so you can expect it to react in a way that most users will be familiar with.