aira tabs - VO光标不遵循编程焦点

Question

我一直在努力将aria添加到现有的标签界面，该界面使用网址哈希（或片段）来帮助共享指向特定标签的链接。即，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

我尝试了什么：

• 在焦点更改之前和之后将焦点发送到当前选定的选项卡
• 一个丑陋的黑客，我在哈希更改之前从主体中删除哈希ID并在
之后将其添加回来 {li} preventDefault()同时包含click和hashchange事件处理程序

其中没有一个有效。无论我做什么，我都无法让VO光标跟随标签的键盘导航。

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

Answer 1

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

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

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

Answer 2

看来我跳了枪，并认为这个问题是由于VO不遵循程序化焦点。 REAL问题似乎是VO或浏览器错误，实际上与CSS有关。请参阅我的示例页面：http://mfairchild365.github.io/aria-tabs-vo-bug/

我想了解为什么单个CSS规则会产生这样的影响。如果您能回答这个问题，请在我的示例仓库中打开一个问题。