键盘导航的Tabindex或Focus

Question

我目前正在使用可访问性和WCAG进行大量工作，但是我试图为所有用户，尤其是使用键盘导航的用户工作的一件事，是一个跳过内容链接。

这听起来很容易做到，在页面顶部的锚定链接，人们可以"单击"它以跳过导航或其他很大程度上不重要的内容。

不过，当您使用键盘"单击"锚链接时，然后再次点击" TAB"键时，您会在"跳过到内容"链接之后直接被带到元素，而不是下一个元素在主要内容区域。即，您链接到的锚点尚未收到重点。

看来这是一个常见的问题，因为我尚未找到一个具有"跳过到内容"链接的网站，该链接的工作正常。甚至Vision Australia网站也有这个问题。

我希望有人知道技术/hack/库可以尽可能地做这项工作。

编辑：我可以确认此问题发生在Chrome和Safari中，但我的Mac上不在Firefox中。

Answer 1

大多数浏览器以视觉向下滚动到同页链接的目标，但实际上并没有将键盘关注该链接。您可以使用JavaScript（或以下示例中的jQuery）将重点放在目标上：

$("a[href^='#']").not("a[href]='#'").click(function() {
   $("#"+$(this).attr("href").slice(1)+"").focus();
});

但是，Webkit中有一个错误，即使该解决方案也无法在webkit浏览器（例如Chrome和Safari）中工作。大约一年前，我写了一篇博客文章，其他几个人都建立了：

• Terrill Thompson博客文章
• 更多来自Damon Muma
• Zegnat的仅JavaScript解决方案
• Webkit错误报告
• Chromium Bub Report

Answer 2

您可以将另一个元素放在要接收下一个焦点的内容上方。然后跳到该元素，然后使用diff，例如字体大小0或没有内容等的p标签从视图中隐藏它。

。

<div class="skip-nav-container">
  <a class="skip-to-main-content" href="#mainContent">Skip to main content</a>
</div>
<nav>
<!--skip this content-->
</nav>
<div class="skip-nav-target">
  <p class="skip-nav-target-content" id="mainContent"></p>
</div>
<main>
<!--next element in the main content area-->
<!--main content-->
</main>