VoiceOver 不会对锚点做出反应,也不会正确地改变 iOS 上的焦点

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

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

iOS 上的 VoiceOver 是我遇到的 唯一 屏幕 reader,它似乎无法处理锚点和 JavaScript element.focus() 正常运行。

查看 my blog。在那里您会看到经典的 skip to content-link 和一个 scroll to top- 按钮。 link 是一个常规锚点,其目标是 ID 为 main 的 div。该按钮会触发一个动画,但由于这对盲人来说效果不佳,我还让它将焦点移动到 skip to content link。当 VoiceOver 打开时,双击上述任一控件。焦点不会移动。我在 Safari、Firefox、Google Chrome 和 iSource 的 iOS 应用程序中对此进行了测试。

现在转到任何其他设备,可以是 android phone 或 windows 计算机。打开屏幕 reader。据我所知,它始终有效(使用 Microsoft Edge、Google Chrome 和 Internet Explorer 进行测试)。

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" 没有解决我的锚点问题。如果锚指向 link,但其中 必须 是一些可见文本,例如

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

不起作用。有没有人偶然发现一个好的、可靠的解决方法,或者我将不得不接受这样一个事实,即我的 anchors/JavaScript 焦点更改对 iOS 上的 VoiceOver 用户没有任何作用?

这是一个 known problem on iOS. There's a blog,它有一些棘手的变通解决方案,但真正的责任在于 Apple 来解决这个问题。