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）中，虽然页面在视觉上向下移动，但焦点却没有，这意味着在激活accesskey之后，再次跳转只会跳回到页面顶部并返回到访问权限链接。

我遇到了与IE a known quirk相同的问题，并通过为目标元素设置特定宽度来修复问题。但是，这似乎不适用于Chrome。我还尝试在#mainContent div中添加一个tab-able元素，在#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();

“将tab的索引值-1添加到div中会生成该div 以编程方式可聚焦，允许它在焦点时获得焦点使用.focus（）方法。“ - Via：http://webstandardssherpa.com/reviews/overlays-and-lightboxes-keys-to-success/

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

Answer 4

获取上面的片段并尝试将它们概括为目标任何潜在的跳过链接。

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

跳过在Chrome中无效的链接

4 个答案: