OStack程序员社区-中国程序员成长平台

标题: javascript - VoiceOver 无法对 anchor 使用react,并且无法正确更改对 iOS 的关注 [打印本页]

作者: 菜鸟教程小白    时间: 2022-12-12 15:12
标题: 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/






欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/) Powered by Discuz! X3.4