将 VoiceOver 推进到移动 Safari 中的指定元素 [英] Advancing VoiceOver to a specified element in mobile Safari

问题描述

我无法弄清楚如何将 VoiceOver 提升到 Mobile Safari 中的特定元素.

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

跳过</a>...<a name="target"></a>

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

我也试过:

跳过

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

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

元素.

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

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

不幸的是，这仍然不会自动前进到下一个元素，并且在您离开时不会触发模糊事件，因此一旦用户移动光标，我没有将链接恢复到其原始位置的良好机制.

>

这似乎应该很容易做到，但我的想法已经不多了.有没有对你们都有效的解决方案?

解决方案

这适用于我的 iphone(移动键盘焦点并使画外音朗读内容):

<button onclick="document.getElementById('last').focus();">移动焦点到底部标题</button><div tabindex="-1" id="last"><h2>dzoooong</h2><p>大量新内容</p><p>blablalbalblablabl</p>

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

I'm having trouble figuring out how to advance VoiceOver to a specific element in Mobile Safari.

So far, I've tried:

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

This will (sometimes) advance to the target if the page is scrollable but doesn't work consistently on pages both long and short and sometimes will cause the following element not to get read!

I've also tried:

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

Unfortunately, this doesn't seem to work for non-input fields.

More advanced, I've tried placing the link before the element I want to skip and tried setting that element to aria-hidden="true" but for some reason this isn't working for <header> elements.

One thing that has worked is actually physically moving the element I want to skip before the skip link, eg:

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

Unfortunately, this still doesn't automatically advance to the next element and no blur event fires when you leave so I don't have a good mechanism for restoring the link to its original location once the user advances the cursor.

It seems like this should be something easy to do and I am running out of ideas. Are there any solutions that have worked for you all?

解决方案

This works on my iphone (moves keyboard focus and makes voiceover speak the content):

<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>

It does not work on all elements, e.g. can't move focus directly to the h2.

这篇关于将 VoiceOver 推进到移动 Safari 中的指定元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！