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

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.
Discover more from Web Developer Tips and Tricks
Subscribe to get the latest posts sent to your email.
Please Leave a Question or Comment
Hey Brian, I’m having this issue and stumbled across your article.
I tried doing the update in this JS file as you mentioned: plugins/divi-accessibility/public/partials/js/aria_mobile_menu.js
But it doesn’t seem to have made any difference. The site I’m working on is ilotoolkit.com.au
Wondering if I misunderstood the instructions?
Thanks!
David
Hi David,
Looks like you did the code update correctly on the server, but the updated code is not making it to the front end of the rendered site; it’s still running the old version, which is why it is not working.
Make sure you clear all caches and temporarily disable all Divi optimizations. If you’re using a build process, bypass that temporarily if you can.
Best,
Brian
Thanks Brian, that’s very helpful!