【发布时间】：2015-10-27 04:04:35
【问题描述】：
我最近注意到 VoiceOver 在选项卡和选项卡面板上的 Web 导航存在一个非常奇怪的问题。特别是，如果包装选项卡和选项卡面板的包装器设置了 aria-label 属性，则在切换选项卡时，VoiceOver 导航无法导航到选项卡面板。
这个问题可能很难用语言来描述，所以我创建了this fiddle 来演示。请注意，外部包装器 div 具有 aria-label="Wrapper"。以下是重现问题的步骤：
- 运行 jsFiddle 以加载结果区域。
- 使用鼠标或键盘导航导航到选项卡按钮之一。
- 激活旁白。
- 使用
VO + Right Arrow尝试导航到标签面板内容，这应该可以。 - 使用
VO + Left Arrow导航回第二个选项卡，按VO + Space激活该选项卡。 - 现在使用
VO + Right Arrow尝试导航到新标签面板。 这将失败。
完成上述步骤后，在选项卡之间切换并不能解决问题，您无法导航到面板。 但是，如果您从包装 div 中删除 aria-label="Wrapper"，一切都会恢复正常。
有熟悉 VoiceOver 和 WAI-ARIA 的人知道问题出在哪里吗？
【问题讨论】：
-
您在启动 Safari 时是否尝试过开启画外音？我在 iOS 上使用 Voiceover 或 Windows 上使用 Jaws 15 作为屏幕阅读器的 Firefox 没有问题，所以这看起来是特定于 OSX 的。您可以尝试发送电子邮件至accessibility@apple.com 报告错误。
-
@Jared 感谢您的评论，我尝试使用其他浏览器（Chrome、Safari、FF），但奇怪的是，FF 26.0 没有问题。我不确定我应该责怪 VoiceOver、浏览器还是我自己......
-
我自己发现了这个。你有没有得到任何地方？
-
@Phil 不久前，所以我不记得我到底做了什么。但是，我相当肯定我认为这是 OSX VoiceOver 的特定问题，无法解决。这可能与 VoiceOver 如何处理被注入页面的动态内容有关，所以我建议看看如何在不完全删除它们的情况下显示/隐藏内容（比如使用
display: none）。 -
谢谢。我仔细研究了它，除了它是一个错误之外似乎找不到任何东西。我已经向 Apple 提交了错误报告。我会让你知道它的去向（可能无处可去）。
标签： html macos accessibility voiceover wai-aria