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

概述我使用safari浏览器在ios中打开我的网站.移动菜单工作正常. 当我点击菜单图标(三行图标)时,它会打开.但是,当我启用语音然后进入浏览器并点击该菜单图标时,移动菜单无法打开. 这是css问题还是我必须添加一些咏叹调属性？ 有人能帮我吗？ jQuery('.menu-trigge').once('menuMobile').click(function () { 我使用safari浏览器在ios中打开我的网站.移动菜单工作正常.

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

这是CSS问题还是我必须添加一些咏叹调属性？

有人能帮我吗？

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 >  <div >	<div >	  <ul >		<li>Menu 1</li>		<li>Menu 2</li>	  </ul>	</div>  </div>  <div >	<span></span>	<span></span>	<span></span>  </div></div>

解决方法 这是因为您使用了div来附加click事件.

你的div.menu-trigger应该是一个按钮[type =“button”].

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

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

如果你真的不能使用按钮那么你需要做一些咏叹调,tabindex和Js重物.

所以要么这样做：

<button type="button" >

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

<div  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 =“打开菜单”.然后在菜单打开后,将aria-label更改为“关闭菜单”.

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

总结

以上是内存溢出为你收集整理的html – 在IOS上启用语音时,移动菜单无法打开全部内容，希望文章能够帮你解决html – 在IOS上启用语音时,移动菜单无法打开所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。