無法在移動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>