Enable Divi Mobile Menu Keyboard Navigation for Accessibility Compliance

Out of the box, the Divi theme mobile menus are not navigable using the tab key, and therefore do not meet accessibility requirements.

A quick solution to this is to install the Divi Accessibility plugin, available on GitHub:

This works on the default built-in Divi menu. The problem, though is that it doesn’t seem to work properly when using the Divi Menu Module, or certain Divi menu configurations. When you navigate to a hamburger menu and it “Enter” or “Return”, the menu opens then immediately closes.

The Cause of the Problem

I traced the problem to there being multiple hamburger menu buttons in the Divi HTML, some of which are invisible, but still can open (or close) the menu. The JS is written so that all menu buttons are clicked when you land on one and activate it with the keyboard.

In plugins/divi-accessibility/public/partials/js/aria_mobile_menu.js, the code is:

	/**
	* Allows mobile menu to be opened with keyboard.
	*/
	$('.mobile_menu_bar').keyup(function(event) {
		if (event.keyCode === 13 || event.keyCode === 32) {
			$('.mobile_menu_bar').click();
		}
	});

So, all buttons with the class, “mobile_menu_bar” get clicked when any one is activated using the keyboard. For some reason, Divi can output multiple buttons so they all get triggered, causing the menu to open then immediately close.

The Solution

Fortunately, the fix is easy:

	/**
	* Allows mobile menu to be opened with keyboard.
	*/
	$('.mobile_menu_bar').keyup(function(event) {
		if (event.keyCode === 13 || event.keyCode === 32) {
			$(this).click();
		}
	});

Replacing “.mobile_menu_bar” with “this” solves the problem!

Note the code above is the source; in the actual plugin you have to modify the minified version, aria_mobile_menu.min.js.

I forked the V2.0.6 code with this fix here:

This solved the problem for me on this site. Let me know how it works for you! – Brian