accessibility - aria tabs - VO 光标不跟随程序焦点

Question

我一直致力于将 aria 添加到现有的选项卡界面，该界面使用 url 哈希(或片段)来帮助共享指向特定选项卡的链接。即，tabs.html#tab2 将在页面加载时显示 tab2。

我一直在尝试遵循 https://medium.com/@LeonieWatson/danger-testing-accessibility-with-real-people-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

我尝试过的:

• 在哈希更改前后将焦点发送到当前选定的选项卡
• 一个丑陋的 hack，我在散列更改之前从正文中删除散列 ID，然后再将其添加回去
• preventDefault() 在 click 和 hashchange 事件处理程序中

这些都不起作用。无论我做什么，我都无法让 VO 光标跟随标签的键盘导航。

有人知道如何解决这个问题吗？

Answer 1

我不确定这是否相关，但我不禁注意到如果你打开 your example code在 Safari 中，然后单击页面中的任何文本，您会看到一个闪烁的光标。 (您还可以看到光标在视频中闪烁。)

另一方面，code example from the article that you linked to似乎没有那样做。 (也就是说，如果您单击页面中的文本，您不会看到闪烁的光标。)所以这看起来有点奇怪。

抛出一个不相关的想法，如果有人按住他们的其中一个箭头键，您的 keydown 代码是否有可能容易受到竞争条件的影响？