用于键盘导航的 tabindex 或焦点

Question

目前，我在可访问性和 WCAG 方面做了大量工作，但我试图让所有用户，尤其是使用键盘导航的用户都能正常工作的一件事是跳转到内容链接。

这听起来很简单，只需在页面顶部放置一个指向锚点的链接，人们就可以“点击”它来跳过导航或其他基本上不重要的内容。

不过，问题是，当您使用键盘“单击”锚链接，然后再次按“tab”键时，您会直接进入“跳转到内容”链接之后的元素，而不是下一个元素在主要内容区域。即，您链接的锚点没有获得焦点。

这似乎是一个常见问题，因为我还没有找到一个带有“跳转到内容”链接的网站，它可以正常工作。甚至Vision Australia 网站也有这个问题。

我希望有人知道一种技术/黑客/库来完成这项工作。

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

Answer 1

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

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

但是，WebKit 中存在一个错误，即使此解决方案也无法在 Chrome 和 Safari 等 WebKit 浏览器中运行。大约一年前，我写了一篇关于此的博客文章，其他几篇文章也以此为基础：

• Terrill Thompson blog post
• More from Damon Muma
• A JavaScript-only solution by Zegnat
• WebKit Bug Report
• Chromium Bub Report

Answer 2

您可以在您想要获得下一个焦点的内容上方放置另一个元素。然后跳到那个元素并使用 diff 方式隐藏它，比如 font-size 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>