javascript - VoiceOver 无法对 anchor 使用react，并且无法正确更改对 iOS 的关注
<p><p>我问过这样的问题 <a href="https://stackoverflow.com/questions/53978096/best-way-to-focus-element-of-any-kind" rel="noreferrer noopener nofollow">before</a> ，但在找到解决方法之前我无法安心:</p>
<p>iOS 上的 VoiceOver 是我遇到的<b>唯一</b>屏幕阅读器，它似乎不能正确处理 anchor 和 JavaScript <code>element.focus()</code> 功能。</p>
<p>查看 <a href="https://blog.tijos-welt.de/en/" rel="noreferrer noopener nofollow">my blog</a> .在那里你会看到经典的<code>skip to content</code>-链接和一个<code>scroll to top</code>-按钮。该链接是一个常规 anchor ，其目标是 id 为 <code>main</code> 的 div。该按钮触发动画，但由于这对盲人来说没有理想的效果，我还将焦点移至 <code>skip to content</code> 链接。在 VoiceOver 开启时双击上述任一控件。焦点不会移动。我在 Safari、Firefox、Google Chrome 和 iSource 的 iOS 应用程序中对此进行了测试。</p>
<p>现在转到任何其他设备，无论是安卓手机还是 Windows 电脑。打开屏幕阅读器。据我所知，它始终有效(在 Microsoft Edge、Google Chrome 和 Internet Explorer 上进行了测试)。</p>
<p> anchor 的 HTML:</p>
<pre><code><a href="#main" id="top-link">Skip to content</a>
<!-- ... -->
<div id="main" role="main">
<!-- ... -->
</div>
</code></pre>
<p>按钮的JS:
document.getElementById('scroll-to-top').addEventListener('click', function() {
document.getElementById('top-link').focus();
});</p>
<p>没什么特别的，对吧？不，主 div 上的 <code>tabindex="-1"</code> 不能解决我的 anchor 问题。如果 anchor 指向一个链接，但其中<b>必须</b>有一些可见的文本，例如</p>
<pre><code><a id="anchorTarget">&nbsp;</a>
</code></pre>
<p>不起作用。是否有人偶然发现了一个好的、可靠的解决方法，还是我只能忍受这样一个事实，即我的 anchor /JavaScript 焦点更改对 iOS 上的 VoiceOver 用户没有任何作用？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>这是 <a href="https://bugs.webkit.org/show_bug.cgi?id=179011" rel="noreferrer noopener nofollow">known problem on iOS</a> .有一个<a href="https://axesslab.com/skip-links/" rel="noreferrer noopener nofollow">blog</a>这有一些 hacky 解决方案，但真正的责任在于 Apple 来解决问题。 </p></p>
<p style="font-size: 20px;">关于javascript - VoiceOver 无法对 anchor 使用react，并且无法正确更改对 iOS 的关注，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/56598650/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/56598650/
</a>
</p>
页:
[1]