Html 跳过不在Chrome中工作的链接

首先，我已经看过了，但遗憾的是，它似乎没有提供任何解决方案（除了JS，我担心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，纯粹用作锚点

当链接被激活时，一切似乎都正常工作；视觉上，页面向下跳转，焦点转移到#main content之后的第一个链接

然而，在Chrome（v12.0.742.91）中，当页面在视觉上向下移动时，焦点不会向下移动，这意味着在激活accesskey后，再次使用Tab键只会使您返回页面顶部并返回访问链接

我有一个与IE相同的问题，它被归结为，并通过设置目标元素的特定宽度来修复。然而，这似乎不适用于Chrome。我还尝试在#mainContent div中添加一个tab-able元素，在#mainContent div中添加任何类型的内容，以及各种各样的浮动/宽度/高度变化，但似乎没有任何解决方法

有没有人对Chrome有过类似的问题，或者知道修复方法

提前谢谢各位

西蒙

除非有人找到一个成功的技巧/黑客，否则你只能竭尽全力。 你的同伙可能也会这么做，因为他们关心你

---

很显然，它终于被解决了。

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

因此，在链接上，我使用了onClick

$（'mainContent'）.attr（'tabIndex'，-1）.focus（）

“将tabindex值-1添加到div会使该div
可编程聚焦，允许在
使用了.focus（）方法。“--通过：

看小提琴：
我知道这是一个老问题，但经过几个小时的搜索，今天我终于偶然发现了它。我还没有找到解决这个问题的非js解决方案，尽管这个问题在Chrome中被标记为已修复，但它仍然表现出相同的行为。由于缺少其他内容，我使用jQuery。我使用了一个不引人注目的事件监听器，而不是内联脚本

HTML：

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

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

我还隐藏链接，除非它从键盘接收焦点。这样，只有键盘用户和屏幕阅读器才会知道链接在那里。使用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
}

要进行演示，您可以查看。如果有人有办法使用javascript，我很乐意听到。我认为，如果一个解决方案需要js，它就无法真正访问。
将上面的代码片段进行归纳，试图针对任何潜在的跳过链接

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

真不敢相信这仍然是个问题！这表明这是最终修复，但我不知道如何确认。我在最新的Chrome金丝雀上试过，但还是坏了。这显然还是个问题。我已经找到了一个js解决方案，但是如果它需要js来工作，它实际上是不可访问的，IMHO.shouldnt tabindex 0应该使其可聚焦，而-1则相反？
jQuery('[href^="#"][href!="#"]').click(function() {
  jQuery(jQuery(this).attr('href')).attr('tabIndex', -1).focus();
});