当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 { 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t cursor: pointer; 
 
\t width: 33px; 
 
\t margin: 0 0 0 15px; 
 
\t transition: 275ms all ease; 
 
} 
 
.menu-trigger span { 
 
\t display: block; 
 
\t height: 3px; 
 
\t background: #233e6b; 
 
\t margin-bottom: 4px; 
 
\t -webkit-transition: 275ms all ease; 
 
\t transition: 275ms all ease; 
 
} 
 
.main-menu { 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t right: -10px; 
 
\t width: 100vw; 
 
\t z-index: 100; 
 
\t background: #fff; 
 
} 
 
ul.menu { 
 
max-height: calc(100vh - 55px); 
 
\t overflow: auto; 
 
}

<div class="menu-block"> 
 
    <div class="main-menu"> 
 
\t <div class="menu_wrapper"> 
 
\t <ul class="menu"> 
 
\t \t <li>Menu 1</li> 
 
\t \t <li>Menu 2</li> 
 
\t </ul> 
 
\t </div> 
 
    </div> 
 
    <div class="menu-trigger"> 
 
\t <span></span> 
 
\t <span></span> 
 
\t <span></span> 
 
    </div> 
 
</div>

Answer 1

aria-*属性不会在这种情况下会导致这样的问题，据我可以告诉。 JS/CSS定位出错了。我不能告诉你如何定位它，你实际上是如何将其更改为可见的，但你可以试试这个：

添加另一个CSS类.main-menu-on并使用正确的属性吧，这样的事情：

.main-menu-on { 
    top: 50px; 
    right: 10px; 
} 

然后用JS来切换类，例如，像这样：

document.querySelector('.menu-trigger').addEventListener('click', function() { 
var menu = document.querySelector('.main-menu'); 
menu.classList.toggle('main-menu-on'); 
}, false); 

注意：如果你想使这个访问，你应该了解和使用aria-*属性。这与您是否可以使用VoiceOver打开菜单无关，但使用VoiceOver的用户可能会对交互感到困惑。

这里的例子不aria-*属性：

document.querySelector('.menu-trigger').addEventListener('click', function() { 
 
var menu = document.querySelector('.main-menu'); 
 
menu.classList.toggle('main-menu-on'); 
 
}, false);

.menu-trigger { 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t cursor: pointer; 
 
\t width: 33px; 
 
\t margin: 0 0 0 15px; 
 
\t transition: 275ms all ease; 
 
} 
 
.menu-trigger span { 
 
\t display: block; 
 
\t height: 3px; 
 
\t background: #233e6b; 
 
\t margin-bottom: 4px; 
 
\t -webkit-transition: 275ms all ease; 
 
\t transition: 275ms all ease; 
 
} 
 
.main-menu { 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t right: -10px; 
 
\t width: 100vw; 
 
\t z-index: 100; 
 
\t background: #fff; 
 
} 
 
.main-menu-on { 
 
\t top: 50px; 
 
\t right: 10px; 
 
} 
 
ul.menu { 
 
max-height: calc(100vh - 55px); 
 
\t overflow: auto; 
 
}

<div class="menu-block"> 
 
    <div class="main-menu"> 
 
\t <div class="menu_wrapper"> 
 
\t <ul class="menu"> 
 
\t \t <li>Menu 1</li> 
 
\t \t <li>Menu 2</li> 
 
\t </ul> 
 
\t </div> 
 
    </div> 
 
    <div class="menu-trigger"> 
 
\t <span></span> 
 
\t <span></span> 
 
\t <span></span> 
 
    </div> 
 
</div>

Answer 2

这是因为使用了一个div附加一个click事件。

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

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

由于div不可聚焦，所以使用蓝齿键盘或类似键盘的设备（如盲文键盘或开关设备）的用户也会遇到麻烦，也不能通过按Enter键或空格键来操作。按钮元素负责所有这些问题。

如果你真的不能使用一个按钮，那么你将需要做一些咏叹调，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 =“打开菜单”。然后在菜单打开后，将aria标签更改为“关闭菜单”。

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