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

Question

我有以下要求：

在我的网页上有用于导航的锚链接（像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>

请注意，我知道这是硬编码的，将来我会更改它，但出于测试目的，我将其留在这里。

好的，这有什么作用呢？ 在这篇文章中 ，上面的方法被称为聚焦 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 宣布“目标内容...”。你能更详细地描述一下你在测试时采取的步骤吗？

Answer 2

你做的工作太多了。默认情况下， an<a>将为您移动焦点。但是，如果目标元素不是本机可聚焦的元素，那么tabindex="-1"对于某些浏览器（主要是 Internet Explorer），它也必须具有。原因请参见“关于 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。您可以通过使用键盘 Tab 到“跳到内容”链接然后按 来测试它enter。如果再按tab一次，焦点应该移动到 <div> 之后的任何可聚焦元素。

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

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

但是（这是一个很大的“但是”，我认为这是您问题的重点），iOS 上的 VoiceOver（不确定 Mac）不会兑现焦点变化。这是Apple的一个错误（在我看来）。转到任何具有页内链接的网站，VoiceOver 焦点不会移动目标元素。您可以在https://www.applevis.com/forum/ios-ios-app-discussion/skip-link-issue 上看到对此问题的一个参考

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