我正在使用 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>
这是因为您使用了 div 附加了单击事件。
您的 div.menu-trigger 应该是一个 Button[type="button"] 。
屏幕阅读器使用标记的语义来告诉它某些内容是否可操作。 Div 不是一个原生可操作的元素。
如果有人使用蓝牙键盘或类似键盘的设备（例如盲文键盘或开关设备），您也会遇到麻烦，因为 div 无法聚焦，也无法通过按 Enter 或空格键进行操作。按钮元素可以解决所有这些问题。
如果您确实无法使用按钮，那么您将需要执行一些 aria、tabindex 和 JS 繁重工作。
所以要么这样做：
<button type="button" class="menu-trigger">
或者，使用 aria 角色、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 更改为“close菜单”。
<button type="button" class="menu-trigger" aria-label="open the menu">
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
