在最近对跳过导航链接的最佳实践的搜索中,这是我能找到的最全面的解决方案:http://www.communis.co.uk/blog/2009-06-02-skip-links-chrome-safari-and-added-wai-aria
我不喜欢这个的一点是它需要在 Webkit 浏览器上使用 JavaScript。对于像跳过导航链接这样看似简单的事情,这真的是我们拥有的最佳解决方案吗?
是否有讨论其他“更好”解决方案的链接或示例?
最佳答案
一个好的跳过链接应该始终可见,以提醒用户它的存在。一个好的替代方法是使用 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 一些关于跳过链接实现和可用性的有用文章的链接
关于html - 跨浏览器、无 Javascript、跳过导航链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4878158/