跳过链接在 Chrome 中不起作用

Question

首先，我查看了this previous question，但遗憾的是它似乎没有提供任何解决方案（除了 JS，我担心它不是入门者）

我的页面顶部有一些跳过链接...

<ul>
<li class="skip-link"><a href="#mainContent" accesskey="S"><span>Skip to main content</span></a></li>
<li class="skip-link"><a href="#main-navigation" accesskey="N"><span>Skip to main navigation</span></a></li>
</ul>

还有更远的地方……

<div id="mainContent"></div>

这是一个空的 div，纯粹用作锚点。

链接激活后一切正常；视觉上页面跳下，焦点转移到#mainContent之后的第一个链接。

但是在 Chrome (v 12.0.742.91) 中，虽然页面在视觉上会向下移动，但焦点不会，这意味着在激活访问键后，再次 Tab 只会将您跳回页面顶部并返回访问链接。

我遇到了与 IE 相同的问题，该问题被归结为 a known quirk，并通过为目标元素设置特定宽度来解决。但是，这似乎不适用于 Chrome。我还尝试在#mainContent div 中添加一个可选项卡元素，在#mainContent div 中放置任何类型的内容，以及各种浮动/宽度/高度变化，但似乎没有任何解决方法。

有没有人遇到过类似的 Chrome 问题或知道解决方法？

先谢谢各位了

西蒙

Answer 1

在有人找到窍门/黑客之前，你能做的最好的事情就是由this issue 主演，它成功了this one。 您的 SO 研究员可能也会这样做，因为他们关心。

看来，终于是fixed了。

Answer 2

我知道这是一个老问题，但在搜索了几个小时后，我终于在今天偶然发现了它。我仍然没有找到非 js 解决方案，虽然这个问题在 Chrome 中被标记为已修复，但它仍然表现出相同的行为。由于缺少其他任何东西，我使用了 jQuery。我没有使用内联脚本，而是使用了不显眼的事件侦听器。

HTML：

<div id="skiptocontent"> 
    <a href="#mainContent" id="skipper">Skip to Main Content</a>
</div>

<div id="mainContent"></div>

jQuery：

$(document).ready(function () {
    $("#skipper").click(function () {
        $('#mainContent').attr('tabIndex', -1).focus();
    });
});

除非它从键盘获得焦点，否则我也会隐藏链接。这样，只有键盘用户和屏幕阅读器才会知道链接的存在。使用 CSS3，您可以确保在用户快速通过选项卡时它会变得短暂可见。

CSS：

#skiptocontent a {
    position: absolute;
    top:-40px;
    left:0px;
    background:transparent;
    -webkit-transition: top 1s ease-out, background 1s linear;
    transition: top 1s ease-out, background 1s linear;
    z-index: 100
}
#skiptocontent a:focus {
    position:absolute;
    left:0px;
    top:0px;
    background:#F1B82D;
    -webkit-transition: top .1s ease-in, background .5s linear;
    transition: top .1s ease-in, background .5s linear
}

如需演示，您可以查看fiddle。如果有人有办法使用 javascript，我很想听听。如果需要 js，我认为解决方案不是真正可访问的。

Answer 3

我也遇到了这个问题，我能找到解决它的唯一方法是使用 JavaScript（和 jQuery）。

所以在链接上我使用了 onClick $('#mainContent').attr('tabIndex',-1).focus();

"将 tabindex 值 -1 添加到 div 使该 div 以编程方式可聚焦，允许它在 .focus() 方法被使用。” -- Via: http://webstandardssherpa.com/reviews/overlays-and-lightboxes-keys-to-success/

看小提琴： http://jsfiddle.net/PEDaS/1/

Answer 4

采用上面的 sn-ps 并尝试将它们概括为针对任何潜在的跳过链接。

jQuery('[href^="#"][href!="#"]').click(function() {
  jQuery(jQuery(this).attr('href')).attr('tabIndex', -1).focus();
});