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();
		}
	});

Simply replacing “.mobile_menu_bar” with “this” solves the problem!

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

Note the code above is the source; in the actual plugin I had to modify the min.js version.

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

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA. I’ve been designing websites using WordPress and from scratch using HTML, CSS, PHP, and JavaScript since 2010. I create websites and web applications for businesses, nonprofits, and other organizations. I have a degree in Electrical Engineering (BSEE) from California Institute of Technology and a degree in Engineering Management (MSEM) from Stanford University.

brianshim.com