javascript - 聚焦任何类型元素的最佳方式

Question

我有以下要求:

在我的网页上有用于导航的 anchor 链接(类似于 skip to content 等)。这些 anchor 应该将目标元素带入 View 并聚焦它。 (焦点很重要，否则屏幕阅读器无法正确定位。到目前为止，我的代码如下所示:

<a href="#content" class="navbtn">Skip to content</a>
<!-- somewhere else...-->
<div id="content" tabindex="-1">
Lorem ipsum...
</div>
<script>

$(".navbtn").click(function(e) {

    e.preventDefault();

    $("#content").focus();
});

</script>

请注意，我知道这是硬编码的，以后我会更改它，但出于测试目的，我将其留给了它。

好的，那么这是做什么的呢？ In this post据说上面的方法聚焦于 div 元素。在视觉上我无法判断，但我的屏幕阅读器不会移动到该元素(我在 iPhone 上的 Safari 中使用 VoiceOver)。如果目标是按钮、链接或任何其他默认具有 tabindex 的元素，则它可以正常工作。

有什么想法吗？

编辑:当按下左模式键时，我让它与我的盲文显示器一起工作。我通常使用右侧的模式键向手机发送双击事件，但右侧的不起作用。然而，左边的是。老实说，我不知道为什么。双击屏幕仍然不起作用...无论哪种方式，都不需要 JavaScript。

Answer 1

我刚刚在运行 iOS12 的 iPhone 上测试了以下内容(没有 JavaScript)，在 Safari 中使用了 VoiceOver:

<a href="#content">Skip to content</a>
...
<div id="content" tabindex="-1">Target content...</div>

它按预期工作，焦点移动到目标内容并且 VoiceOver 宣布“目标内容...”。您能否更详细地描述您在测试时所采取的步骤？