Javascript 在新创建的元素上设置初始选项卡焦点，而不会弄乱屏幕阅读器

在将新的html插入一个部分时，我希望第一次按tab键跳过前几个链接，然后集中在后面的链接上。目前，我的解决方案是插入一个带有

tabindex='-1'

的空

，然后对其调用

focus（）

。但是，我注意到屏幕读取软件将跳转到此

focus（）

。是否有其他方法设置初始选项卡焦点，或使屏幕读取软件忽略

焦点（）

？（对于NVDA，我插入的

div

是一个

role='status'

，它应该在更新时读取，

focus（）

占据了NVDA大约40%的时间，没有任何明显的模式。）

失败的方法是

tabindex

。Firefox和Chrome都不尊重

tabindex

对于插入元素的第一个tab-press。在下面的代码示例中，第二个元素具有最后一个tabindex，但在Firefox中首先关注它。Firefox中的行为在第一次按tab键和后续按tab键之间有所不同。对于第一个选项卡焦点，Chrome完全忽略tabindex，因此第一个选项卡焦点始终是第一个链接。

函数k（）{
document.getElementById（“h”）.innerHTML=“firstsecondthird”；
}
点击我

尝试1：通过测试，如果拥有现有焦点的DOM元素被破坏，则下一个接收选项卡焦点的对象不稳定，并且在Firefox和Chrome上的行为不同

在Firefox上，焦点“幽灵般地转移”到要显示的第一个文本顺序元素，然后第一个选项卡将从第一个元素前后移动。因此，制表符将到达其制表顺序在第一个元素之后的元素，shift制表符将到达其制表顺序在第一个元素之前的元素

在Chrome上，无论tabindex是什么，第一个选项卡的焦点都会出现在第一个文本顺序元素上

这意味着，如果DOM元素被破坏，tabindex是一个无效的解决方案

尝试2：另一种选择是focus（）。插入tabindex='-1'style='outline:none'的ghost元素，然后对其调用focus（），确实会使tab聚焦于我希望它聚焦的元素。然而，这有一个问题，那就是把屏幕阅读器搞砸了。每当调用focus（）时，屏幕阅读器（经过NVDA测试）可能会执行以下三项操作之一：

像我希望的那样阅读新的信息文本（20%的几率）

阅读窗口标题，然后是选项卡标题，然后是focus（）d元素，这很可怕（70%的几率）

完全不阅读（10%的几率）

aria hidden没有帮助。自动对焦没有任何作用

尝试3：这意味着focus（）不是可接受的解决方案。因此，唯一的选择是不破坏DOM元素。因此，必须移动DOM元素。 然而，如果我们不断地把东西推到那里，移动元素的墓地将会被填满。如果墓地元素包含我们的焦点元素，我们不能删除它，否则我们将处于焦点元素被破坏的状态。在我的情况下，互动小说将在几个小时内填满这个墓地，达到千兆字节。 因此，在删除历史日志元素时，我们必须检查该元素及其所有子元素，以确保其中不包含焦点，如果包含焦点，则在该元素周围跳舞

尝试4：然而，事实证明移动一个元素无论如何都会杀死它的焦点（至少在Firefox上是这样）。所以你不能只是把它移到墓地，你必须一点也不要碰它

一旦你有了一个没有移动到任何地方的幸存对象，你需要在它上面设置tabindex='-1'，否则这个墓地对象会扰乱你的标签顺序。但是，如果您确实将其tabindex设置为-1，那么（至少在Firefox上），taborder现在的行为再次类似于被破坏的DOM对象情况

尝试5：

不要把那个消失的物体移到任何地方

取而代之的是，取下该对象，然后将其隐藏

围绕它构建新对象：旧对象必须按文本顺序准确放置在选项卡放置的位置。你的新内容将是它之前的一半和之后的一半

为activeElement检查所有隐藏对象的子节点（递归），以找出其焦点所在。对于不是焦点节点父节点的每个非活动元素，必须将其删除，否则屏幕阅读器会抱怨很多。对于幸存的节点，确保它们完全不可见并且没有内容，但不要使用display:none，这会破坏焦点。在聚焦节点上设置tabindex=-1

如果焦点不在删除的对象中，则找到拥有焦点的对象，并将其tabindex设置为上半部分和下半部分的tabindex之间

---

我已经没有耐心了，我不打算实施这个建议的解决方案，在新文本的中间留下神秘的半删除的、半隐藏的元素。在5次失败的尝试之后，我已经没有多少希望了，我也不想让维护人员背上一页又一页的深入评论、奇怪的不直观行为和意外的性能问题，只为屏幕阅读器。我将继续使用旧的focus（）解决方案。

您是否尝试添加tabindex=-1并使用focus对其进行聚焦，负tabinex值表示元素应该是可聚焦的，但不应该通过顺序键盘导航来访问。请检查这些以了解更多详细信息是的，这是我正在使用的当前解决方案。我在第一段中对此进行了描述。我试图理解您为什么要阻止键盘用户访问前几个链接。根据页面的内容/结构，屏幕阅读器用户可能不会通过Tab键进行导航，因此对他们来说问题不大。我认为部分问题是您正在破坏DOM元素。考虑把所有东西放在DOM中，然后隐藏/显示你需要的CSS。理想情况下，这两套设备应放在单独的容器中