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

【问题标题】：Best way to focus element of any kind聚焦任何类型元素的最佳方式
【发布时间】：2019-05-27 10:24:57
【问题描述】：

我有以下要求：

在我的网页上有用于导航的锚链接（如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）。如果目标是按钮、链接或任何其他默认具有 tabindex 的元素，则可以正常工作。

有什么想法吗？

编辑：按下左模式键时，我让它与我的盲文显示器一起工作。我通常使用正确的模式键向手机发送双击事件，但正确的模式键不起作用。然而，左边的确实如此。老实说，我不知道为什么。在屏幕上双击仍然不起作用...无论如何，都不需要 JavaScript。

【问题讨论】：

标签： javascript jquery html focus accessibility

【解决方案1】：

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

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

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

【讨论】：

我的代码和你的一模一样。我用盲文显示器导航到链接，然后按相当于双击的盲文显示器键。焦点不动。不过，我将仅使用屏幕进行测试。
即使只是使用屏幕，它也不起作用。如果我双击显示“阅读器可用”的链接，仅此而已，焦点不会移动（使用 VO、Safari、iOS 12.1.2）
根据您听到“Reader available”的事实，您正在测试的页面可能触发了 Safari 的Reader feature，它妨碍了您的交互？
有什么方法可以避免这种情况吗？
这是一个浏览器功能，所以我认为应该由用户来关闭它。

【解决方案2】：

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

之后的任何可聚焦元素。

如果您随后 shift+tab，您将不会回到

（这是您想要的行为），因为它有 tabindex="-1" 而不是 tabindex="0"。

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

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

很遗憾，您应该使用简单示例（无需 javascript）编写代码，iOS 上的 VoiceOver 用户将继续遇到问题，就像他们在所有其他网站上一样。

【讨论】：

让我感到困惑（并导致我假设有办法解决这个问题）是，在某些页面（例如 SELFHTML）上，锚链接上的焦点移动似乎有效......
嗯，这很奇怪。我尝试了 wiki (en.wikipedia.org/wiki/Puppy)，当我选择“开发”（目录下的第一项）时，它正确地将我的 VoiceOver 焦点移到了开发部分。 Wiki 确实不使用tabindex="-1"，因此他们的页面确实不将焦点正确地移动到 Internet Explorer 上。也许tabindex="-1" 是导致 VoiceOver 问题的原因。（注意：如果您从 iOS 尝试此评论中的 wiki url，它可能会将您带到移动版本。转到页面上的最后一个链接“桌面”，以转到桌面版本测试。）
我现在有带和不带 tabindex 的 div 并且目前没有工作，无论我是在屏幕上双击还是使用我的盲文显示器。但不久前，当我使用左模式键时，它确实有效（使用 tabindex）......

【解决方案3】：

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

【讨论】：

我阅读了您发布的文章并进行了更多研究，但无论是 tabindex="0" 还是 tabindex="-1" - 如果我单击链接，则没有任何反应。如果目标是按钮、链接或类似的焦点会被适当地移动......但如果它是 div 则不会。

【解决方案4】：

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

【讨论】：

哪种类型的空标签？
我使用一个
实际上进一步测试我发现
我会试一试的。谢谢你。很老套，但可能是最好的解决方案......
确实如此。感谢您检查这一点。我怀疑我们将不得不做类似之类的事情，因为 Internet Explorer 不会将焦点转移到“空”链接上。但是那么我们应该让每个人都被覆盖吗？ 看起来充满希望

【解决方案5】：

这总是最好的：

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

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

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

    e.preventDefault();

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

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

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

【讨论】：