Question

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?

Answer 1

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.