将VoiceOver推进到移动Safari中的指定元素

Question

我无法弄清楚如何将VoiceOver推进到Mobile Safari中的特定元素。

到目前为止，我已经尝试过了：

<a href="#target">Skip</a>
...
<a name="target"></a>

如果页面是可滚动的，这将（有时）前进到目标，但在长和短的页面上不能一致地工作，有时会导致以下元素无法读取！

我也试过了：

<a href="javascript:someElement.focus()">Skip</a>

不幸的是，这似乎不适用于非输入字段。

更高级，我尝试将链接放在我想要跳过的元素之前，并尝试将该元素设置为aria-hidden="true"但由于某种原因，这不适用于<header>元素。

实际上有一件事是在跳过链接之前实际移动我想要跳过的元素，例如：

<a id="skip" href="javascript:$('header').insertBefore($('#skip'));">Skip</a>

不幸的是，这仍然没有自动前进到下一个元素，并且当你离开时没有模糊事件触发，因此一旦用户前进光标，我没有一个很好的机制来恢复到原始位置的链接。

看起来这应该是容易做的事情，而且我的想法已经不多了。有没有适用于你们的解决方案？

Answer 1

这适用于我的iphone（移动键盘焦点并使画外音说出内容）：

<button onclick="document.getElementById('last').focus();">Move focus to bottom heading</button>

<div tabindex="-1" id="last">
<h2>dzoooong</h2>
<p>Heaps of new content</p>
<p>blablalbalblablabl</p>
</div>

它不适用于所有元素，例如无法将焦点直接移到h2。