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>

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

好的，这是怎么做的？ In this post 据说上面的方法关注div元素。视觉上我无法判断，但我的屏幕阅读器不会移动到该元素（我正在iPhone的Safari中使用VoiceOver）。如果目标是按钮，链接或默认情况下具有tabindex的任何其他元素，则可以正常工作。

有什么想法吗？

编辑：按左模式键时，我的盲文显示器让它感到不舒服。我通常使用正确的模式键将双击事件发送到手机，但是正确的方法不起作用。但是，左边的是。老实说，我不知道为什么。双击屏幕仍然不起作用...不管哪种方式，都不需要JavaScript。

Answer 1

您正在做太多工作。默认情况下，<a>将为您移动焦点。但是，如果目标元素不是本机可焦点元素，则对于某些浏览器（主要是Internet Explorer），它也必须具有tabindex="-1"。有关原因，请参见“关于Active Accessibility支持”中的“ 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 + 选项卡，则不将返回

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

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

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

看到有关此问题的一种参考。

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

答案 1 :(得分：2)

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

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

它按预期方式工作，重点转移到目标内容，VoiceOver宣布“目标内容...”。您可以详细描述测试时要采取的步骤吗？

答案 2 :(得分：1)

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

的更多信息

答案 3 :(得分：0)

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

答案 4 :(得分：0)

这永远是最好的：

<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();
            }
        });

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

Answer 2