javascript - Safari iOS 中的 VoiceOver - 隐藏的元素仍然可以听到

Question

问题:隐藏菜单上的菜单项仍由 VoiceOver 朗读

查看实际原型(prototype):mobile-menu.html

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

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

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

VoiceOver 有一个怪癖:如果通过选择“close-X”隐藏了菜单，那么只有页面上可见的链接可以听到。如果菜单被虚拟点击隐藏 - jQuery 的 .click() 行为由退出菜单触发 - 然后 VoiceOver 继续将隐藏的链接视为可见。

问题:如何让 VoiceOver 使虚拟点击的行为像物理点击一样 - 并忽略折叠的滑入式菜单上的隐藏链接？

Answer 1

在您的代码示例中，我看到了这一点:

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

aria-hidden以值 true 开头, 但在我开始切换菜单并再次隐藏它之后，它永远不会切换回 true .由于这是您对屏幕阅读器隐藏菜单所依赖的技术，因此它不会被隐藏。

简而言之，这似乎与点击事件无关，而更多地与您的函数中的某些内容在菜单切换时无法切换该值有关。

我没有在 VoiceOver 上测试，我在 NVDA 上看到了这个。您应该在更多的屏幕阅读器组合上进行测试，并可能用原始 JavaScript 替换您的 jQuery 函数以确认您的断言。

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

另外，role="navigation"可以通过使用 <nav> 来替换元素。

此外，role="menu"除非您想复制操作系统样式的菜单和 implement all the expected keyboard shortcuts，否则可能会让用户感到困惑.我建议您将其删除。