tabindex或焦点用于键盘导航

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浏览器中运行.大约一年前我写了一篇关于此的博客文章,还有其他几篇文章建立在它上面: