VoiceOver navigation doesn't work on tab panel

问题:

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.

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. 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.

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.

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

回答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! :-)