aria tabs - VO 光标不跟随程序焦点
aria tabs - VO cursor does not follow programatic focus
我一直致力于将 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 事件处理程序中
None 其中有效。无论我做什么，我都无法让 VO 光标跟随标签的键盘导航。
有人知道如何解决这个问题吗？
我不确定这是否相关，但我不禁注意到，如果您在 Safari 中打开 your example code 然后单击页面中的任何文本，您会看到闪烁的光标（您还可以看到光标在您的视频中闪烁。）
另一方面，code example from the article that you linked to 似乎没有这样做。 （也就是说，如果您单击页面中的文本，您不会看到闪烁的光标。）所以这看起来有点奇怪。
抛出一个不相关的想法，如果有人按住其中一个箭头键，您的按键代码是否有可能容易出现竞争条件？
看来我是草草了事，以为问题是因为 VO 没有遵循程序化的重点。真正的问题似乎是 VO 或浏览器错误，实际上与 CSS 相关。请在此处查看我的示例页面：http://mfairchild365.github.io/aria-tabs-vo-bug/
我想了解为什么单个 CSS 规则会产生如此大的影响。如果你能回答这个问题，请在我的示例 repo 中打开一个问题。
我一直致力于将 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事件处理程序中
None 其中有效。无论我做什么，我都无法让 VO 光标跟随标签的键盘导航。
有人知道如何解决这个问题吗？
我不确定这是否相关，但我不禁注意到，如果您在 Safari 中打开 your example code 然后单击页面中的任何文本，您会看到闪烁的光标（您还可以看到光标在您的视频中闪烁。）
另一方面，code example from the article that you linked to 似乎没有这样做。 （也就是说，如果您单击页面中的文本，您不会看到闪烁的光标。）所以这看起来有点奇怪。
抛出一个不相关的想法，如果有人按住其中一个箭头键，您的按键代码是否有可能容易出现竞争条件？
看来我是草草了事，以为问题是因为 VO 没有遵循程序化的重点。真正的问题似乎是 VO 或浏览器错误，实际上与 CSS 相关。请在此处查看我的示例页面：http://mfairchild365.github.io/aria-tabs-vo-bug/
我想了解为什么单个 CSS 规则会产生如此大的影响。如果你能回答这个问题，请在我的示例 repo 中打开一个问题。