无法在移动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. 在内部<span>添加一个tabindex="-1" 。 我怀疑这会做什么，但是内部元素的不可聚焦性可能会影响父元素。

2. 在外部<div>上使用未记录的role="text" 。 这将导致整个<div>被视为一个元素，而不是将内部元素视为单独的VoiceOver“制表位”。 这可能有更好的机会解决此问题。

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