15

javascript - VoiceOver does not react to anchors and changing focus on iOS prope...

 5 years ago
source link: https://stackoverflow.com/questions/56598650/voiceover-does-not-react-to-anchors-and-changing-focus-on-ios-properly
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

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?


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK