Accessibility – Keyboard Navigation of Menu

I have an accessibility issue with the main navigation. The requirement is to enable keyboard navigation of the menu by using the TAB key. This a common accessibility requirement – WCAG 2.0.

The issue is that tabbing through the menu results in skipping the sub menus altogether as they seem to not be able to react to FOCUS EVENT given by the tab key – instead they only react to the mouseover event – which of course requires a mouse.

I found the code that seems to be enabling the sub menu dropdowns to open on mouseover in wp-content/themes/enfold/js/avia.js.

But I have not been able to modify it successfully. I can get the sub menus to open on focus but I cannot get them to close when the tab moves to the next parent menu item.

// bind events for dropdown menu
dropdownItems.find('li').andSelf().each(function()
{
	var currentItem = $(this),
		sublist = currentItem.find('ul:first'),
		showList = false;
		

	if(sublist.length)
	{
		sublist.css({display:'block', opacity:0, visibility:'hidden'});
		var currentLink = currentItem.find('>a');
		

/*	THIS WAS AN ATTEMPT TO ATTAIN KEYBOARD NAVIGATION THROUGH TABBING
	
		currentLink.bind('focus', function()
		{
			console.log('focus');
			sublist.stop().css({visibility:'visible'}).animate({opacity:1});
			
		});

		// THIS DOES NOT CLOSE THE SUB MENU
		// BECAUSE IT DOESN'T FIRE IF THERE IS NO SUB MENU UNDER THIS DROPDOWN
		// BASED ON CONDITIONAL ABOVE:  if(sublist.length) {  

		currentItem.bind('focusout', function()
		{

			console.log('focusout');
			sublist.stop().animate({opacity:0}, function()
			{
				sublist.css({visibility:'hidden'});
			});
			
		});
*/

		currentLink.bind('mouseenter', function()
		{
			console.log('mouse enter SHOW SUBLIST');
			sublist.stop().css({visibility:'visible'}).animate({opacity:1});
		});

		
		
		currentItem.bind('mouseleave', function()
		{
			console.log('mouse leave HIDE SUBLIST');
			sublist.stop().animate({opacity:0}, function()
			{
				sublist.css({visibility:'hidden'});
			});
		});
		
		

		

	}
});

In case you want to see it in my site here is the URL, however my experience is that this is not unique to my site.

Navigate the through the page by hitting the TAB key when you get to 24×7 Help Desk the TAB should open the SUB MENU. It doesn’t. It skips it altogether.

What to do? I have posted this issue in a couple other related threads but have had no response – so, I thought I would try to post the issue in its own thread. Sorry for the duplication. Love this theme – so I hope we can fix this weakness in the menu. Otherwise I can’t use this theme on my next project which is government related and so it has an ACCESSIBILITY requirement.