跳过链接在 Chrome 中不起作用

Posted 2023-03-05

【中文标题】跳过链接在 Chrome 中不起作用

【英文标题】：Skip links not working in Chrome

【发布时间】：2011-09-10 22:40:43

【问题描述】：

首先，我查看了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 问题或知道解决方法？

先谢谢各位了

西蒙

【参考方案1】：

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

看来，终于是fixed了。

【讨论】：

不敢相信这仍然是个问题！

#25 in this Chromium issue 建议这终于修复了，但我不知道如何确认。我在最新的 Chrome Canary 中试过了，但那里还是坏掉了。

这显然仍然是一个问题。我找到了一个 js 解决方法，但是如果它需要 js 才能工作，恕我直言，它实际上是不可访问的。

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

【参考方案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/

【讨论】：

不应该 tabindex 0 让它成为焦点，而 -1 则相反吗？

【参考方案4】：

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

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