在iOS上启用语音拨号时，Mobile菜单不会打开 [英] Mobile menu is not opening when voice over enabled on IOS

问题描述

我使用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;光标：指针;宽度：33px;保证金：0 0 0 15px; transition：275ms all ease;}。menu-trigger span {display：block; height：3px;背景：＃233e6b; margin-bottom：4px; -webkit-transition：275ms都很轻松; transition：275ms all ease;}。main-menu {position：absolute;顶部：100％;正确：-10px;宽度：100vw; z-index：100;背景：#fff;} ul.menu {max-height：calc（100vh  -  55px）; overflow：auto;}  

 < div class =menu - 嵌段> < div class =main-menu> < div class =menu_wrapper> < ul class =menu> < li>菜单1< / li> < li>菜单2< / li> < / UL> < / DIV> < / DIV> < div class =menu-trigger> <跨度>< /跨度> <跨度>< /跨度> <跨度>< /跨度> < / div>< / div>  

解决方案

您的div.menu-trigger应该是一个按钮[type = button]。

屏幕阅读器使用标记的语义来告诉它是否有可操作的东西。 Div不是一个本地可操作的元素。

使用蓝色键盘或类似键盘的设备（如盲文键盘或开关）设备），因为div不可聚焦，也不能通过点击回车或空格键来操作。 button元素负责处理所有这些问题。

如果你真的不能使用按钮，那么你需要做一些aria，tabindex和JS heavy-

所以要么这样做：

 <按钮类型=buttonclass =menu-trigger> 
  

或者，使用aria角色，tabindex和额外JS，您需要执行此操作：

 < div class =menu-triggerrole =buttontabindex =0> 
 //然后确保JS在点击和输入和空格键按键事件时触发。 
 //这样可以模拟使用按钮元素烘焙的键盘和焦点功能
  

重要：不要忘记让屏幕阅读器只显示一些文本，告诉屏幕阅读器用户菜单按钮的用途。轻松完成一个按钮元素 - 只需添加aria-label =打开菜单。然后在菜单打开后，将aria-label改为关闭菜单。

 < ; button type =buttonclass =menu-triggeraria-label =打开菜单> 
  

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>

解决方案

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

这篇关于在iOS上启用语音拨号时，Mobile菜单不会打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！