5

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

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

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

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

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

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

4

2 回答 2

6

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

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

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

于 2012-10-25T03:17:11.627 回答
0

您可以在要接收下一个焦点的内容上方放置另一个元素。然后跳到该元素并使用 diff 方式将其从视图中隐藏，例如 font-size 0 或没有内容的 ap 标记等。

<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>
于 2018-05-16T10:20:34.970 回答