VoiceOver does not react to anchors and changing focus on iOS properly

Question

I have asked questions like this one before, but I can't find peace of mind until I found a workaround:

VoiceOver on iOS is the only screen reader I encountered which doesn't seem to handle anchors and the JavaScript element.focus() function correctly.

Check out my blog. There you'll see the classic skip to content-link and a scroll to top-button. The link is a regular anchor with its target being the div with the id main. The button triggers an animation, but as this isn't having the desired ecfect for the blind, I also made it move focus to the skip to content link. Double tap on either of the aforementioned controls while VoiceOver is switched on. The focus will not get moved. I tested this in the iOS apps for Safari, Firefox, Google Chrome and iSource.

Now go to any other device, be it android phone, or windows computer. Switch a screen reader on. As far as I could tell, it always worked (tested with Microsoft Edge, Google Chrome and Internet Explorer).

The HTML for the anchor:

<a href="#main" id="top-link">Skip to content</a>
<!-- ... -->
<div id="main" role="main">
<!-- ... -->
</div>

The JS for the button: document.getElementById('scroll-to-top').addEventListener('click', function() { document.getElementById('top-link').focus(); });

Nothing fancy, right? And no, tabindex="-1" on the main div does not fix my anchor problem. What works is if the anchor refers to a link, but there must be some visible text in it, something like

<a id="anchorTarget">&nbsp;</a>

doesn't work. Did anyone stumble upon a good, solid workaround, or will I just have to live with the fact that my anchors/JavaScript focus changing doesn't do anything for VoiceOver users on iOS?

Answer 1

This is a known problem on iOS. There's a blog that has some hacky workaround solutions but the real onus is on Apple to fix the problem.