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"> </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?
