Aria Support for Mobile Menu

Hi Joshua: It looks like you may have fixed this? I’d be curious to learn more. I was able to zoom in to 200% on your site and then use keyboard navigation to expand your hamburger menu. I work for a .EDU and am having the same issue.

Hello,

I released an improvement for this in version 1.2.5. I see one more change that would be useful and I will push it in an update coming very soon.

Thanks, Alex

Update is live now, hope it improves the remaining issues with the mobile menu.

Thanks.

I haven’t had a chance to test the update. However, I was able to add some code to achieve the mobility menu effect of when zoomed.

I do want to thank this community for being active and helping make this available.

@alexstine I’m testing the update on my Dev site and I see that aria-expanded=”false” has been added, but I’m not seeing any change in functionality. After tabbing to the hamburger menu and seeing it highlighted, I still can’t get it to open when using the enter key.

@jberube Would you be willing to please share that code or help point me in the right direction?

Hello,

Are you using the Divi theme or a custom child theme?

Also, could I get a link to your site so I can see what’s going on?

Thanks, Alex

@alexstine Hi! It is a child theme of Divi.

Here is a link: Dev site

Thanks in advance,
Ashley

Hello,

When I visit your site, I can expand the mobile menu perfectly.

<span class="mobile_menu_bar mobile_menu_bar_toggle a11y-mobile-menu-open" role="button" aria-expanded="true" tabindex="0"></span>

This is the element I focus on and press Enter to open. I am not sure if you can see it open visually, but it does open for screen reader users.

Are you referring to this menu or another menu?

The only change I can see needed is an aria-label that says “Menu”. Not sure why it’s not adding to this button.

Thanks, Alex

I tried it with NVDA running and it works fine. Without NVDA it doesn’t respond to the enter key. I’ve used a keyboard event listener to make it work.

@alexstine: Yes, I am referring to that menu. In speaking with a representative from the OCR who audits websites for Section 508 (WCAG 2.0) compliance, they stated that the mobile menu needs to be fully functioning with just keyboard navigation, no extra software (i.e. if you simply zoom in to 150%-200% in your Chrome browser; which is how they test).

When troubleshooting this some more, it looks like if I use my computer mouse to click open the mobile menu on my site, I can continue with keyboard navigation. So I just need the Enter button to open the menu in the first place. Right now, as @benqwerty stated, I can tab to the hamburger icon, but it doesn’t respond to the menu key.

@jberube Would you mind sharing what changes you made to get it to work?

@laserlag FWIW, I was on a time crunch and since the conversation kind of died out on this thread, I went a different direction and used Max Mega Menu. It’s compatible with Divi and I was able to implement it in such a way that is full accessibility compliant. Fair warning: may require some custom CSS finessing; but I hear using it with Divi 4+ is much easier. Their documentation is pretty good, too.

@ashchad Thanks, that’s good to know! OCR is currently working with us to bring our school’s website into compliance. We might end up using Max Mega Menu too.

@laserlag I just went through that with them, too. Our case was recently closed, successfully. Feel free to reach out directly if you end up going that route and have any questions.