跳过在Chrome中无效的链接

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(版本12.0.742.91)中,虽然页面在视觉上向下移动,但焦点却没有,这意味着在激活访问键之后,再次跳转只会将您跳回到页面顶部并返回到访问链接.

我有一个与IE相同的问题,它被归结为一个已知的怪癖,并通过设置一个特定的宽度到目标元素来修复.但是,这似乎不适用于Chrome.我还尝试在#mainContent div中添加一个tab-able元素,在#mainContent div中添加任何类型的内容,以及各种浮动/宽度/高度变化,似乎没有什么可以修复它.

有没有人与Chrome有任何类似的问题或知道修复？

在此先感谢大家

西蒙

Answer 1

你可以做,直到有人最好找一招/黑客主演这个问题从而成功这一项.你的SO研究员可能会这样做,因为他们关心.

显然,它终于得到了解决.

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，我不认为解决方案是真正可访问的。