在IOS上启用语音时，移动菜单无法打开

Question

我使用safari浏览器在ios中打开我的网站。移动菜单工作正常。

当我点击菜单图标（三行图标）时，它会打开。但是，当我启用语音然后进入浏览器并点击该菜单图标时，移动菜单无法打开。

这是css问题还是我必须添加一些aria属性？

有人可以帮助我吗？

   

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

这是因为您使用div将点击事件附加到。

你的div.menu-trigger应该是一个按钮[type =＆＃34; button＆＃34;]而不是。

屏幕阅读器使用标记的语义来告诉它某些内容是否可操作。 Div不是本机可操作的元素。

使用蓝牙键盘或类似键盘的设备（例如盲文键盘或开关设备）的人也会遇到麻烦，因为div不可调焦，也不能通过按Enter键或空格键来操作。按钮元素处理所有这些问题。

如果你真的不能使用按钮那么你需要做一些咏叹调，tabindex和JS重装。

所以要么这样做：

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

或者，使用咏叹调角色，tabindex和额外的JS，你需要这样做：

<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

重要：不要忘记有一些屏幕阅读器专用文字告诉屏幕阅读器用户菜单按钮的用途。使用按钮元素轻松完成 - 只需添加aria-label =＆＃34;打开菜单＆＃34;。然后在菜单打开后，将aria-label更改为＆＃34; 关闭菜单＆＃34;。

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

Answer 2

在我知道的情况下，

aria-*属性在这种情况下不会导致此类问题。你的JS / CSS定位有问题。我无法告诉您如何定位它以及如何将其实际更改为可见，但您可以尝试这样做：

添加另一个CSS类.main-menu-on并使用正确的属性，如下所示：

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

然后使用JS来切换类，例如，像这样：

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

注意：如果您想使其可访问，您应该了解并使用aria-*属性。这与您是否能够使用VoiceOver打开菜单无关，但使用VoiceOver的用户可能会对交互感到困惑。

以下是没有aria-*属性的示例：

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;