Mobile menu is not opening when voice over enabled on IOS

Question

I am opening my website in ios using safari browser. The mobile menu is working fine.

It opens when I tap on the menu icon(that three lines icon). But when I enable voice over then come to the browser and tap that menu icon, the mobile menu is not opening.

Is this the css issue or I have to add some aria attributes?

Can someone help me?

   

jQuery('.menu-trigge').once('menuMobile').click(function () {
                    jQuery(this).toggleClass('expand');
                    if (jQuery('.menu-trigger').hasClass('expand')) {
                      jQuery('.menu-trigger').first().slideDown();
                    } else {
                      jQuery('.menu-trigger').first().slideUp();
                    }
                  });

.menu-trigger {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	width: 33px;
	margin: 0 0 0 15px;
	transition: 275ms all ease;
}
.menu-trigger span {
	display: block;
	height: 3px;
	background: #233e6b;
	margin-bottom: 4px;
	-webkit-transition: 275ms all ease;
	transition: 275ms all ease;
}
.main-menu {
	position: absolute;
	top: 100%;
	right: -10px;
	width: 100vw;
	z-index: 100;
	background: #fff;
}
ul.menu {
max-height: calc(100vh - 55px);
	overflow: auto;
}

<div class="menu-block">
  <div class="main-menu">
	<div class="menu_wrapper">
	  <ul class="menu">
		<li>Menu 1</li>
		<li>Menu 2</li>
	  </ul>
	</div>
  </div>
  <div class="menu-trigger">
	<span></span>
	<span></span>
	<span></span>
  </div>
</div>

Answer 1

This is because you have used a div to attach a click event to.

Your div.menu-trigger should be a button[type="button"] instead.

Screen readers use the semantics of the markup to tell it if something is actionable. Div is not a natively-actionable element.

You will also have trouble with someone using a blue-toothed keyboard or keyboard-like device (such as a braille keyboard or switch device) since a div is not focusable, nor is it actionable by hitting enter or spacebar. The button element takes care of all of these issues.

If you really can't use a button then you will need to do some aria, tabindex, and JS heavy-lifting.

So either do this:

<button type="button" class="menu-trigger">

or, using aria role, tabindex, and extra JS you will need to do this:

<div class="menu-trigger" role="button" tabindex="0">
// then make sure the JS fires on click and on the enter and spacebar keypress events.
// this mimics the keyboard and focus features that are baked in with the button element

important: don't forget to have some screen-reader-only text to tell a screen reader user what the menu button is for. Easily done with a button element -- just add aria-label="open the menu". Then after the menu opens, change aria-label to say "close the menu".

<button type="button" class="menu-trigger" aria-label="open the menu">

Answer 2

aria-* attributes won't cause such problem in such case, as far as I can tell. You got something wrong with the JS/CSS targeting. I can't tell how you target it and how you actually change it to visible, but you may try this:

Add another CSS class .main-menu-on and use the right properties for it, something like this:

.main-menu-on {
    top: 50px;
    right: 10px;
}

Then use JS to toggle class, for example, like this:

document.querySelector('.menu-trigger').addEventListener('click', function () {
var menu = document.querySelector('.main-menu');
menu.classList.toggle('main-menu-on');
}, false);

Note: if you want to make this accessible, you should understand and use aria-* attributes. This isn't related to if you able to open the menu with VoiceOver or not, but the user who is using the VoiceOver, may get confused about the interaction.

Here's the example without aria-* attributes:

document.querySelector('.menu-trigger').addEventListener('click', function () {
var menu = document.querySelector('.main-menu');
menu.classList.toggle('main-menu-on');
}, false);

.menu-trigger {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	width: 33px;
	margin: 0 0 0 15px;
	transition: 275ms all ease;
}
.menu-trigger span {
	display: block;
	height: 3px;
	background: #233e6b;
	margin-bottom: 4px;
	-webkit-transition: 275ms all ease;
	transition: 275ms all ease;
}
.main-menu {
	position: absolute;
	top: 100%;
	right: -10px;
	width: 100vw;
	z-index: 100;
	background: #fff;
}
.main-menu-on {
	top: 50px;
	right: 10px;
}
ul.menu {
max-height: calc(100vh - 55px);
	overflow: auto;
}

<div class="menu-block">
  <div class="main-menu">
	<div class="menu_wrapper">
	  <ul class="menu">
		<li>Menu 1</li>
		<li>Menu 2</li>
	  </ul>
	</div>
  </div>
  <div class="menu-trigger">
	<span></span>
	<span></span>
	<span></span>
  </div>
</div>