移动子菜单展开/折叠不适用于配音

时间:2016-12-07 07:13:37

标签: html accessibility wai-aria voiceover

我有以下HTML。

<ul class="menu">
  <li><span>Main item</span></li>
  <li>Main item 2
    <span>Main item 2</span>
    <span class="sub-menu-trigger"></span>
    <div class="menu-wrapper">
      <ul class="menu">
        <li><span>Sub menu item</span></li>
      </ul>
    </div>
  </li>
</ul>

sub-menu-trigger课程中,我有以下css

display: block;
background: url(../images/icons/plus.png) center center/23px no-repeat;
width: 45px;
height: 36px;
position: absolute;
top: 0;
right: 0;
-webkit-transition: all .4s ease;
transition: all .4s ease;

我已经写了点击甚至扩展子菜单

$('.sub-menu-trigger').on('click', function(){
// some code
});

这可以在未启用语音时找到。但是启用了语音功能后,它才会首次运行。意味着当我展开它然后我无法关闭它,我也无法扩展另一个子菜单。

但是当我将点击事件代码替换为

$('.sub-menu-trigger').on('click touchstart', function(){
    // some code
});

然后子菜单展开/折叠工作正常,当启用语音但没有语音时,它不起作用。

此外,当启用了语音输入时,我无法点击子菜单项。

我做错了什么?我的HTML中有问题或者我缺少一些属性吗?有人可以指导我吗?

0 个答案:

没有答案