无法在移动Safari中为带有子项的tabindexed元素设置focus（）吗？

Question

作为我最近在一个一页应用程序上所做的所有工作的一部分，我添加了在每次加载新页面时在页面标题上调用focus()的代码。这在台式机上效果很好，并且可以通过屏幕阅读器正确读取，但是在移动Safari中使用VoiceOver会完全失败。

经过数小时的调试和谷歌搜索，我发现尝试着重于带有子元素的元素（通常是不可聚焦的）时似乎失败了。

示例代码：

<div id="header1" tabindex="-1">Hello world</div>
<div id="header2" tabindex="-1">Goodbye <span>cruel cruel</span> world</div>

然后在Safari中启用VoiceOver，然后尝试致电：

document.getElementById('header1').focus();

请注意，它已被读取，但是

document.getElementById('header2').focus();

完全不执行任何操作，对我来说，这似乎完全是坏习惯。我是在做根本上是错误的事情，还是这是一个已知问题，是否有办法解决这个问题而不必求助于没有孩子的元素？

Answer 1

听起来确实很混乱。您可以尝试两种不同的方法：

1. 向内部tabindex="-1"添加<span>。我怀疑这会做什么，但是内部元素的不可聚焦性可能会影响父元素。

2. 使用外部role="text"上未记录的<div>。这将导致整个

   被视为一个元素，而不是将内部元素视为单独的VoiceOver“制表位”。这样可能更容易解决问题。

<div role="text" id="header2" tabindex="-1">Goodbye <span>cruel cruel</span> world</div>