Javascript Safari iOS中的画外音-仍然可以听到隐藏的项目

问题：隐藏菜单上的菜单项仍由VoiceOver说出

请参见正在运行的原型：

我们的网站有一个用于平板电脑和更窄视口的slideIn移动菜单。在Chrome中，键盘可访问性行为包括单击扩展移动菜单中的“close-X”按钮以隐藏菜单；导航到菜单之外会隐藏菜单；键盘上的Esc隐藏菜单

在iOS上使用VoiceOver的Safari中，使用外部键盘，QuickNav会在下拉开关上正确停止，选择它会正确展开隐藏菜单。可以选择菜单项。导航到菜单末尾会隐藏菜单。选择“close-x”也会隐藏菜单

隐藏菜单时，所需的行为是仅浏览页面的可见链接

VoiceOver有一个怪癖：如果菜单是通过选择“close-X”隐藏的，那么只有页面上可见的链接可以听到。如果菜单是通过虚拟单击隐藏的-jQuery的.click（）行为是通过退出菜单触发的-那么VoiceOver会继续将隐藏的链接视为可见

---

问题：如何让画外音使虚拟点击像物理点击一样，并忽略折叠的滑入菜单上的隐藏链接？

在您的代码示例中，我看到了以下内容：

<div class="nav-mobile dropdown-menu dropdown-menu-right" role="menu" aria-hidden="false">

aria hidden

以值

true

开始，但在我开始切换菜单并再次隐藏后，它再也不会切换回

true

。由于这是您对屏幕阅读器隐藏菜单所依赖的技术，因此它不会被隐藏

简言之，这似乎与单击事件无关，更多的是与函数中的某些内容有关，即在菜单切换时未能切换该值

我不是在画外音上测试，我是在NVDA上看到的。您应该在更多的屏幕阅读器组合上进行测试，也许可以用普通JavaScript替换jQuery函数来确认您的断言

在这里，我建议您看看菜单的焦点管理。由于第一个制表位是关闭菜单，汉堡包已经关闭了菜单，所以您可能只想将焦点移到关闭链接

此外，只需使用

元素即可替换

role=“navigation”

此外，

role=“menu”

可能会让用户感到困惑，除非您想复制操作系统风格的菜单和菜单。我建议您将其删除。

可能相关：