javascript - VoiceOver 无法对 anchor 使用react，并且无法正确更改对 iOS 的关注

我问过这样的问题 before ，但在找到解决方法之前我无法安心:

iOS 上的 VoiceOver 是我遇到的唯一屏幕阅读器，它似乎不能正确处理 anchor 和 JavaScript element.focus() 功能。

查看 my blog .在那里你会看到经典的skip to content-链接和一个scroll to top-按钮。该链接是一个常规 anchor ，其目标是 id 为 main 的 div。该按钮触发动画，但由于这对盲人来说没有理想的效果，我还将焦点移至 skip to content 链接。在 VoiceOver 开启时双击上述任一控件。焦点不会移动。我在 Safari、Firefox、Google Chrome 和 iSource 的 iOS 应用程序中对此进行了测试。

现在转到任何其他设备，无论是安卓手机还是 Windows 电脑。打开屏幕阅读器。据我所知，它始终有效(在 Microsoft Edge、Google Chrome 和 Internet Explorer 上进行了测试)。

anchor 的 HTML:

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

按钮的JS: document.getElementById('scroll-to-top').addEventListener('click', function() { document.getElementById('top-link').focus(); });

没什么特别的，对吧？不，主 div 上的 tabindex="-1" 不能解决我的 anchor 问题。如果 anchor 指向一个链接，但其中必须有一些可见的文本，例如

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

不起作用。是否有人偶然发现了一个好的、可靠的解决方法，还是我只能忍受这样一个事实，即我的 anchor /JavaScript 焦点更改对 iOS 上的 VoiceOver 用户没有任何作用？

---

Best Answer-推荐答案

这是 known problem on iOS .有一个blog这有一些 hacky 解决方案，但真正的责任在于 Apple 来解决问题。

关于javascript - VoiceOver 无法对 anchor 使用react，并且无法正确更改对 iOS 的关注，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56598650/