我一直在为现有的选项卡界面添加aria，该界面使用url哈希(或片段)来帮助共享特定选项卡的链接。即tabs.html#tab2将在页面加载时显示表2。
我一直在努力遵循选项卡可访问性的最佳实践，如https://medium.com/@LeonieWatson/危险测试-可访问性-与其他人-4515f72db648
然而，我发现的所有可访问选项卡的示例都删除了哈希更改功能(当选项卡被激活时，URL不会更改)。当我自己尝试实现它时，我遇到了一个奇怪的问题。当VO打开并且VO光标在一个选项卡上时，VO光标将不会跟随键盘导航到其他选项卡。相反，焦点将立即指向带有VO光标的选项卡(防止读取选项卡)。关闭VO时不会出现此问题(可能是因为没有VO光标)。
票据
- 这种情况只出现在Safari中
- 我没有在其他屏幕阅读器中尝试过
- 我的所有VO设置都处于默认状态
示例：
- 该问题的视频演示：https://youtu.be/SkQ_vcJiIMI
- 代码示例：https://gist.github.com/mfairchild365/9b2ba49ec87bd38bb34a433edd994a71(注意，这段代码不是我的，我只是将其作为一个示例，稍作修改)
- 现场示例：https://mfairchild365.com/temp/aira-tabs/tabs.html#home
我尝试过的：
- 在哈希更改前后将焦点发送到当前选定的选项卡
- 一个丑陋的破解，我在更改哈希之前从主体中删除哈希ID，然后再添加回来
click和hashchange事件处理程序中的preventDefault()
这些都不起作用。无论我做什么，我都无法让VO光标跟随选项卡的键盘导航。
有人知道怎么解决这个问题吗？
我不确定这是否相关，但我忍不住注意到，如果你在Safari中打开示例代码，然后点击页面中的任何文本，你会看到一个闪烁的光标。(您也可以在视频中看到光标在闪烁。)
另一方面，您链接到的文章中的代码示例似乎没有做到这一点。(也就是说，如果你点击页面中的文本，你不会看到闪烁的光标。)所以这看起来有点奇怪。
抛出一个无关的想法，如果有人按下他们的一个箭头键，你的按键代码是否有可能受到种族条件的影响？
我似乎抢先一步，认为问题是由于VO没有遵循程序重点。REAL问题似乎是VO或浏览器错误，实际上与CSS有关。请在此处查看我的示例页面：http://mfairchild365.github.io/aria-tabs-vo-bug/
我想了解为什么一个CSS规则会产生如此大的影响。如果你能回答这个问题，请在我的回购示例中打开一个问题。