VoiceOver in Safari iOS - hidden items still audible

Question

The Problem: Menu items on the hidden menu are still spoken by VoiceOver

See the prototype in action: mobile-menu.html

Our website has a slideIn mobile menu for tablet and narrower viewports. In Chrome, Keyboard accessibility behaviors include clicking on the "close-X" button in the expanded mobile menu to hide the menu; navigating beyond the menu hides the menu; Esc on the keyboard hides the menu.

In Safari on iOS using VoiceOver, using an external keyboard, QuickNav correctly stops on the dropdown toggle, and selecting it correctly expands the hidden menu. The menuitems can be chosen. Navigating off the end of the menu hides the menu. Selecting "close-x" also hides the menu.

When the menu is hidden, the desired behavior is to walk ONLY through the page's visible links.

VoiceOver has a quirk: if the menu was hidden by selecting "close-X", then only the visible links on the page are audible. If the menu was hidden by a virtual click - jQuery's .click() behavior triggered by exiting the menu - then VoiceOver continues to treat the hidden links as if they are visible.

The Question: How can I get VoiceOver to make a virtual click behave like a physical click - and ignore the hidden links on the collapsed slide-in menu?

Answer 1

In your code example I see this:

<div class="nav-mobile dropdown-menu dropdown-menu-right" role="menu" aria-hidden="false">

The aria-hidden starts with a value of true, but after I start toggling the menu and hide it again it never switches back to true. Since that is the technique you rely on to hide the menu from a screen reader, it will not be hidden.

In short, this appears to have nothing to do with a click event and more to do with something in your function failing to toggle that value when the menu toggles.

I am not testing on VoiceOver, I am seeing this on NVDA. You should test on more screen reader combinations and maybe replace your jQuery function with vanilla JavaScript to confirm your assertion.

While I am here, I suggest you take a look at focus management for the menu. Since the first tab-stop is to close the menu, which the hamburger already does, you may want to just move focus to the close link.

Also, the role="navigation" could be replaced just by using the <nav> element.

Further, the role="menu" can be confusing for users unless you want to replicate an OS-style menu and implement all the expected keyboard shortcuts. I suggest you just remove it.