No focus on hamburger menu (header)

Support
#1

I have set up my header to switch to a hamburger menu when the viewport is mobile phone size. However, I need the site to be accessible and be read by a screen reader. I’m running into an issue here. The hamburger menu isn’t receiving any focus when I navigate with accessibility settings on for Android and iPhone. Any idea how I can get focus on the hamburger menu so disabled users can still access the site menu from a phone? Does any of this make sense? Thank you.

#2

Hi there,

Would you mind providing the URL of the site in question so that we could check it and provide some suggestions?

Thank you.

#3

Sure. URL is cricketwirelessperks.com / temp password: “peachtree”

Thank you for your time.

#4

Hello There,

I have checked your site and the mobile menu is working and clickable.
This is what I see in a mobile device:

Could you please clarify your issue further?

Thank you.

#5

Thank you for your time. The issue is an accessibility issue. When a user uses their screen reader and navigates the site with gestures, the hamburger menu never receives focus and the user can not access the navigation dropdown menu.

#6

Hi rpduffy,

I suggest editing this navigation element and add a custom class to it, something like custom_nav:

then add this JS snippet to (Pro > Theme Options > JS):

jQuery( document ).ready(function($) {
      $('.custom_nav').attr('href', '#');
});

Then give it a try with the screen reader, let me know how it goes,
Thanks.

#7

Thank you for the help. I’ll try it and get back to you. Thanks!

#8

No problem, I hope it helps :slight_smile:

#9

thanks for the assistance @Alaa that seems to have resolved the issue. One last question here. Is there a way to assign an ALT tag to the hamburger menu? Currently the screen reader simply reads the first link in the menu instead of describing the hamburger menu as “site navigation.” Thanks again for everything.

#10

Hi there,

The alt attribute is supposed to be for the images while.

Since the mobile button is a link, you might want to use aria-label or title instead.

To do that, please update the previous code to:

jQuery( document ).ready(function($) {
      $('.custom_nav').attr('href', '#');
      $('.custom_nav').attr('aria-label', 'Site Navigation');
      $('.custom_nav').attr('title', 'Site Navigation');
});

Hope this helps.
1 Like
#11

awesome. thanks so much.