键盘导航的tabindex或focus

Question

我目前在进行较多的无障碍和WCAG相关的工作，但我正在尝试为所有用户特别是使用键盘导航的用户提供一个良好的“跳过内容”链接。这似乎很简单，只需在页面顶部添加一个锚链接，用户就可以“点击”它跳过导航或其他不重要的内容。

问题是，当您使用键盘“点击”锚链接，然后再次按“tab”键时，您会直接跳转到“跳过内容”链接之后的元素，而不是主内容区域中的下一个元素。也就是说，您链接到的锚点未获得焦点。

这似乎是一个常见的问题，因为我还没有找到一个有“跳过内容”链接且能正确工作的网站。即使Vision Australia网站也存在这个问题。

我希望有人知道一种技术/方法/库可以使其正常工作。 编辑：我可以确认这个问题在我的Mac上的Chrome和Safari中出现，但是在Firefox中没有出现。

- Christian

---

这实际上是一个Chrome/WebKit的问题；在Windows上，IE和FireFox实际上都可以正常工作；因此，问题实际上是如何解决浏览器的错误，HTML本身实际上符合规范。 - BrendanMcK

Answer 1

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

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

然而，WebKit中存在一个错误，即使采用这种解决方案，在Chrome和Safari等WebKit浏览器中也无法正常工作。我大约一年前写了一篇关于此问题的博客文章，还有其他几篇文章也对此进行了探讨：

• Terrill Thompson的博客文章
• Damon Muma的更多信息
• Zegnat的JavaScript-only解决方案
• WebKit Bug报告
• Chromium Bug报告

- Terrill Thompson

---

虽然IE和Firefox不一定会将焦点放在目标元素上（没有href的普通A本来就不应该首先获得焦点），但它们的行为是正确的，即下一个TAB键按下后将移动焦点到目标后的下一个可制表项。这是自IE早期版本以来的长期行为。Chrome/WebKit值得注意的是它只滚动，并且制表继续从原始链接而不是目标位置进行。 - BrendanMcK

很棒的文章，Terril。我喜欢链接到ID而不是命名锚点的概念。尽管浏览器存在一些缺陷，但如果主要屏幕阅读器做得对，我想这会更好（但仍然不完美）。 - Christian

Answer 2

您可以在想要接下来获得焦点的内容上方放置另一个元素。然后跳到该元素并使用不同的方式隐藏它，例如将字体大小设置为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>

- skt

---

你其实可以让它更简单。目标可以是<main>，但你需要在目标上加上tabindex='-1'。浏览器试图将焦点移动到该元素，但除非该元素本身具有焦点，否则你需要使用tabindex='-1'。 - slugolicious