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

:relative; left:0;top:-500px;width:1px;height:1px;overflow:hidden;}

#skip a:active , #skip a:focus{position:static; width:auto; height:auto;}

HTML结构：

<div id=”skip”><a href=”#content”>skip to man content</a></div>

三、哪种文字描述比较好呢？

有不只一种好的方式来描述这个链接 。以下是比较常用的几种：

1. 跳过导航
2. 跳过主要导航
3. 跳过导航链接
4. 跳到主内容区
5. 跳到内容区

以上任何一种都很好。

四、浏览器怪癖

Windows的IE号称是最棘手的浏览器了。在一些页面中，“跳过导航”链接如预期的一样起作用，但是在一些情况中，视线的焦点是改变了，但是输入焦点并没有。换句话说，当用户激活了跳过导航链接，焦点移到正确的位置，但是当用户再次TAB的时候，焦点重新回到了初始的位置。当这种情况发生时，跳过导航的链接就完全没有意义了。

是什么引起了IE下这个bug呢？事实证明，IE需要锚点在一个定义了宽度的元素内。宽度可以是绝对的（如600px）,也可以是相对的（如100%等），但是宽度必须被定义。这个宽度可以定义给一个div，一个表格单元，span标签或者其他元素。

有时在一个特殊的设计里，找到一个可用的宽度单位是很不方便的。但是让“跳过导航”链接起作用是很必要的。事实上，所有页面上的每一个锚点都必须在一个定义了宽度的元素里，并不只是跳过导航链接的锚点。

五、“跳过导航”的替代方法

事实上，“跳过导航”是一个非常笨拙的方法。他将一直有效，直到有一种划分导航和主要内容的更标准化的方法出现。然后，还有不止一种方法来达到跳过导航的效果。

（1）按标题导航

最有效的办法就是创建有合适标题的文档结构，这样用户就能在标题之间跳转。大部分屏幕阅读器都允许用户只听标题，跳过段落、图片、链接和其他