用户体验设计-“跳过导航”链接(2)

总结：这种方法是非常有效可行的。

（2）在页面其他位置放置可见的链接

一些开发者认为这样放置跳过导航链接会不美观，破坏了页面布局。所以把链接移到其他不那么影响页面整体布局的地方。下面这个例子中，开发者就把链接移到了页面左下角的位置。

这样不会显得那么突兀。但是带来了一个问题：它不再是这个页面的第一个链接。屏幕阅读器使用者不能首先听到这个链接，键盘使用者也不能第一个tab到它。虽然可以通过设置链接的tabindex属性来解决，但是假使阅读器使用者并没有使用TAB键来听网页呢？

总结：这种方法并不是对所有用户都适合。

（3）不可见的链接

一些开发者决定隐藏这个链接。最常用的方法就是在页面顶部放一个透明的图片，并设置它的alt属性为“跳过导航”。

这解决了在布局的美观性上的问题。这对阅读器使用者也是完美的解决方案。然而，那些视力正常的键盘使用者看不到这个链接。当他们tab到这个链接的时候，他们不知道有一个链接在那，除非他们看到了浏览器底部的状态栏地址。

另一个类似的方法是使用CSS隐藏链接。这个方法比隐藏图片的方法更好，但是CSS会引起另一个问题：可能阅读器使用者也读不到这个链接了。更多信息查看“CSS in Action： Invisible Content Just for Screen Reader Users”。

总结：这种方法并不是对所有用户都适合。

（4）获焦后链接可见

另一种在美观和可访问性两者之间平衡的方法：当链接被tab时才显示。使用鼠标的人看不见这个链接。不需要“跳过导航”链接的用户完全意识不到这个链接。

现在这个链接是可见的了。它是页面的第一个链接，所以屏幕阅读器会首先读到这个链接。这看起来是几乎完美的解决方案了。唯一的缺陷就是键盘使用者要tab到它的时候才能看见。突然的出现可能会有一点令人疑惑。但是，链接突然出现会吸引用户的注意，这样可以增加用户点击它的可能性。在非官方的观察统计下，用户对这种方法反应良好。

CSS写法：

#skip a , #skip a:hover , #skip a:visited{position