html - 跨浏览器、无 Javascript、跳过导航链接

Question

在最近对跳过导航链接的最佳实践的搜索中，这是我能找到的最全面的解决方案:http://www.communis.co.uk/blog/2009-06-02-skip-links-chrome-safari-and-added-wai-aria

我不喜欢这个的一点是它需要在 Webkit 浏览器上使用 JavaScript。对于像跳过导航链接这样看似简单的事情，这真的是我们拥有的最佳解决方案吗？

是否有讨论其他“更好”解决方案的链接或示例？

Answer 1

一个好的跳过链接应该始终可见，以提醒用户它的存在。一个好的替代方法是使用 CSS 使跳过链接在获得焦点时可见。

考虑这个 HTML

<div id="skip"><a href="#content">Skip to content</a></div>

与此 CSS 一起使用

#skip a {
position: absolute;
margin-left: -3000px;
width: 1;
height: 1;
overflow: hidden;
}

和

#skip a:focus, #skip a:active {
margin-left: 0px;
width: auto;
height: auto;
}

链接在获得焦点之前是隐藏的。 :focus 适合非 IE 浏览器，:active 适合 IE 用户。鼠标用户永远不会看到链接，因为没有使用 :hover。

更新:03\02\11一些关于跳过链接实现和可用性的有用文章的链接

• http://webaim.org/techniques/skipnav/
• http://www.456bereastreet.com/archive/200909/skip_links_need_to_be_at_least_temporarily_visible/
• http://nemesisdesign.net/blog/accessibility/nice-css-skip-links-appearing-focus/