Question

我想在我的网站上添加跳转到内容链接，重点将放在链接上。

但是当我专注于该链接时（点击＆＃39;跳到内容＆＃39;）链接会获得焦点，但我无法点击输入来实际触发链接。

<div class="skiptocontent"><a id="skiptocontent" href="#main" class="">skip to main content</a></div>

<a tabindex="-1" name="maincontent" id="main" class="" href="" alt="movie"><h1 id="movie_name">name</h1></a>

$(document).ready(function() {
    $('#skiptocontent').click(function() {
        $("#"+$(this).attr("href").slice(1)+"")
        .focus()
        .effect("highlight", {}, 1000);
    });
});

然后，如果我再次点击标签，我会回到“跳转到内容链接”

Answer 1

删除tabindex="-1"，表示“无法集中注意力”

Answer 2

我同意Adam关于tabindex =' - 1'。你打破ARIA使用的第二条规则，“不要改变原生语义，除非你真的需要。”

https://www.w3.org/TR/aria-in-html/#second-rule-of-aria-use

通过将tabindex设置为-1，您实质上是在改变锚标记的语义特性。它无法再使用TAB键获得焦点。屏幕阅读器用户无法通过标签找到它。他们必须打开一个链接列表或使用虚拟光标导航。

暂时搁置一下，我可以在Firefox中复制问题，但它在Chrome和IE中运行良好。

<a href='#'>one</a><br>
<a href='#' id='foo' onclick='alert("foo")'>two</a><br>
<a href='#'>three</a><br>
<a href='#'>four</a><br>
<a href='#foo' onclick='document.getElementById("foo").focus()'>five</a><br>

我可以TAB链接五，点击ENTER，焦点移动到链接二。在Chrome和IE中，焦点指示器轮廓围绕链接2绘制，当我按下ENTER时，将显示警告框。

在Firefox中，没有绘制焦点，但焦点类型的移动链接两个。点击ENTER不会显示警告框。如果我在第二个链接上选中或切换选项卡，它将分别移动到三个或一个。

有趣的是，如果我使用JAWS或NVDA运行，在Firefox中运行。

跳到内容 - 专注于链接

2 个答案: