Question

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

这听起来很简单，在页面顶部抛出指向锚点的链接，人们可以“点击”它以跳过导航或其他大部分不重要的内容。

问题是，当您使用键盘“点击”锚点链接然后再次点击“标签”键时，您会在“跳到内容”链接后直接转到元素，而不是下一个元素在主要内容区域。也就是说，你链接的锚没有得到关注。

这似乎是一个常见问题，因为我还没有找到一个具有“跳到内容”链接的网站，这个网站正常运行。即使是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浏览器中运行。大约一年前我写了一篇关于此的博客文章，还有其他几篇文章已经建立在它上面了：

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>

tabindex或焦点用于键盘导航

2 个答案: