0

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?

codycodes
  • 95
  • 8
  • No idea, but you don't or shouldn't need the `class='hidden'`. Maybe try to add something like `aria-label="{Put something useful here}"` in the target link? – Ryan B Jun 22 '13 at 18:27
  • Have you tried other screen readers? Screen readers on web pages tend to be buggy, it may just be a bug in VoiceOver – comodoro Jun 24 '13 at 13:57

1 Answers1

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.

codycodes
  • 95
  • 8