如果包装器具有aria-label，VoiceOver导航在选项卡面板上将不起作用

问题描述

我最近注意到，VoiceOver在选项卡和选项卡面板上的网络导航存在一个非常奇怪的问题。特别是，如果包装选项卡和选项卡面板的包装器设置了aria-label属性，则VoiceOver导航在切换选项卡时无法导航到选项卡面板。

I recently noticed a very weird problem with VoiceOver's web navigation on tabs and tab panels. In particular, if the wrapper wrapping the tabs and tab panels has attribute aria-label set, then VoiceOver navigation cannot navigate to tab panel when switching tabs.

问题可能出在很难用文字描述，因此我创建了进行演示。请注意，外部包装div的 aria-label = Wrapper 。下面是重现问题的步骤：

The problem may be hard to describe by words, thus I created this fiddle to demonstrate. Notice that the outside wrapper div has aria-label="Wrapper". Below are the steps to recreate the problem:

1. 运行jsFiddle加载结果区域。


2. 使用鼠标或键盘导航到选项卡按钮之一。


3. 激活VoiceOver。


4. 使用 VO +右箭头尝试导航到选项卡面板内容，这应该起作用。


5. 使用 VO +左箭头导航回到第二个选项卡，按 VO +空格激活选项卡。


6. 现在使用 VO +右箭头尝试导航到新的标签面板。 这将失败。

1. Run the jsFiddle to get the result area loaded.
2. Navigate to one of the tab buttons either by using mouse or keyboard navigation.
3. Activate VoiceOver.
4. Use VO + Right Arrow to try to navigate to tab panel content, this should work.
5. Use VO + Left Arrow to navigate back to the second tab, press VO + Space to activate the tab.
6. Now using VO + Right Arrow try to navigate to the new tab panel. This will fail.

在完成上述步骤之后，切换选项卡并不能解决问题，您无法导航至面板。 但是，如果您从包装器div中删除 aria-label = Wrapper ，则一切都会恢复。

After the above steps, switching between tabs doesn not fix the problem, you cannot navigate to the panel whatsoever. But if you remove the aria-label="Wrapper" from the wrapper div, everything works again.

熟悉VoiceOver和WAI-ARIA的人是否知道问题可能在哪里？

Does anyone familiar with VoiceOver and WAI-ARIA know where the problem might be?

推荐答案

如果两者选项卡仅包含字符串选项卡面板1和选项卡面板2，则此问题似乎已解决。是的，已经在OS X 10.11.1。上进行了测试。

If the two tabs contain just the strings "Tab panel 1" and "tab panel 2", then the issue appears to be fixed. Tested with OS X 10.11.1.

是的，我知道这个问题已经很老了，但是我添加了我的答案以供将来参考，以防万一！ ：-）

Yes, I know that the question is pretty old, but I'm adding my answer for future reference, just in case! :-)

这篇关于如果包装器具有aria-label，VoiceOver导航在选项卡面板上将不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！