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

Question

我有以下要求：

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

<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）。如果目标是按钮、link 或任何其他默认具有 tabindex 的元素，它工作正常。

有什么想法吗？

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

Answer 1

在 div 上使用 tabindex="-1" 而不是 tabindex="0"。它将使 div 以编程方式成为可聚焦的，而 tabindex="0" 使其成为用户可聚焦的（因为有人使用 tab 键在内容中移动）。更多关于 Using the tabindex attribute

Answer 2

你做的太多了。默认情况下，<a> 会为您移动焦点。但是，如果目标元素不是原生可聚焦元素，则对于某些浏览器（主要是 Internet Explorer），它还必须具有 tabindex="-1"。原因参见"About Active Accessibility Support"中的“Accessible HTML Elements”。

所以你上面的例子将简单地工作：

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

不需要javascript。您可以通过使用键盘跳转到 "Skip to content" link 然后按 enter 来测试它。如果您然后再次按 tab，焦点应该移动到

.

之后的任何可聚焦元素

如果你然后shift+tab，你将不会回到< div> （这是你想要的行为）因为它有 tabindex="-1" 而不是 tabindex="0".

我一直在可访问的网站中使用这种模式。

但是（这是一个很大的 "however"，我认为这是你问题的重点），iOS 上的 VoiceOver（不确定Mac) 不会遵守焦点更改。这是 Apple 的一个错误（在我看来）。转到任何具有页内 link 的网站，VoiceOver 焦点不会移动目标元素。您可以在 https://www.applevis.com/forum/ios-ios-app-discussion/skip-link-issue

中看到对这个问题的引用

不幸的是，您应该使用简单的示例编写代码（不需要 javascript），iOS 上的 VoiceOver 用户将继续遇到他们在所有其他网站上遇到的问题。

Answer 3

我刚刚在 iPhone 运行 iOS12 上使用 Safari 中的 VoiceOver 测试了以下内容（没有 JavaScript）：

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

它按预期工作，焦点移动到目标内容并且 VoiceOver 宣布 "Target content..."。你能更详细地描述一下你在测试时所采取的步骤吗？

Answer 4

iOS 上的画外音将不会支持 JavaScript 对大多数本身不可聚焦的元素的焦点更改，无论设置 tabindex="-1" 还是 tabindex="0"。如果您需要为 iOS 转移焦点，那么我所做的就是添加一个空标签并将焦点设置到该标签上，这不是最佳解决方案，但它是目前 iOS 上唯一可用的解决方案。

Answer 5

这永远是最好的：

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

但有时您需要一些额外的功能，所以我添加了一个按键以确保它会触发点击。键码 32 用于 space 栏，13 用于回车键。

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

    e.preventDefault();

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

$(".navbtn").keypress(function(e){
            if(e.which == 32 || e.which == 13 ){
                $(".navbtn").click();
            }
        });

或者您可以让按键触发焦点

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

Best way to focus element of any kind

html

javascript

jquery

accessibility

focus