html - 在 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="button"]。

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

与使用蓝牙键盘或类似键盘的设备(例如盲文键盘或开关设备)的人打交道时，您也会遇到麻烦，因为 div 不可聚焦，也无法通过按回车键或空格键来操作。按钮元素负责处理所有这些问题。

如果您真的不能使用按钮，那么您将需要做一些 aria、tabindex 和 JS 的繁重工作。

所以要么这样做:

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

或者，使用 aria Angular 色、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="open the menu"。然后在菜单打开后，将 aria-label 更改为“关闭菜单”。

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