Voiceover returns to title of page after reading offset text

Question

I'm trying to make a site accessible, and have a link that is hidden by default unless keyboard focus is placed on it, in which case it becomes visible. The link skips past a YouTube video and onto other content. What I have works fine on a desktop, but using Safari with Voiceover on a mobile device, once the link is read, focus returns to the title of the page. What I have now is:

<div class="skip-link"> <a href="#skipvideo">Skip the Youtube Video</a></div>

...

<a class="hidden" id="skipvideo" name="skipvideo" tabindex="-1"></a>

The CSS:

.skip-link a,.skip-linkvideo{left:-10000px;position:absolute;color:#fff} 
.skip-link a:focus, .skip-link a:active{ 
    left:0px;
    position:relative;
    outline-style:solid;
    height:22px;
    padding:2px;
}

Does anyone have an idea why voiceover does this?

Answer 1

Turns out that the difference in positioning of elements normally and on focus is what was causing the problem.

Changing from absolute to relative caused the other elements to be bumped down, which causes VoiceOver to see it as a page refresh.