“跳过导航”方便视障人群来使用网站

英文原文：http://webaim.org/techniques/skipnav/

一、概况

在许多模板设计中都存在一个问题：页面的主要内容并不在页面的最开始的位置。使用屏幕阅读器的用户常常要听完一长串导航链接、次导航链接、网站logo、网站搜索框和其他元素后，才能到达主要内容区域。事实上，键盘使用者为了要到达主内容区域，必须tab过所有的顶部导航链接。如下图，由于页面布局，导航链接分布在顶部和左侧，用户需要跳过118个链接才能到达内容区。

二、创建“跳过导航“链接

很简单：在页面顶部提供一个可以使用户可以直接跳到主要内容的链接。在大多数情况下，它确实很容易，有不只一种方法来实现。一些方法也优于其他。这里要讨论的方法如下：

在页面顶部提供可见的链接

在页面其他地方提供可见的链接

使链接隐藏

先隐藏链接，直至它获得键盘焦后再显示

（1）在页面顶部提供可见的链接

创建一个跳过导航链接最简单的方法就是把它放在页面顶部，把响应锚点放到主内容区域开始的位置。

链接在左边、右边还是中间的位置不重要，最重要的是要确保这个链接是屏幕阅读器使用者进入页面后最先听到的内容，同时也是键盘最先tab到的内容。否则，用户可能完全没有意识到还有一个“跳过导航”链接，然后浪费时间在跳过那些无关的链接。屏幕阅读器使用者很容易对此感到不耐烦。

跳过导航

标题

第一段

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

（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:relative; left:0;top：-500px;width:1px;height:1px;overflow:hidden;} yixieshi

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

HTML结构：

skip to man content

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

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

跳过导航

跳过主要导航

跳过导航链接

跳到主内容区

跳到内容区

以上任何一种都很好。

四、浏览器怪癖

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

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

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

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

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

（1）按标题导航

最有效的办法就是创建有合适标题的文档结构，这样用户就能在标题之间跳转。大部分屏幕阅读器都允许用户只听标题，跳过段落、图片、链接和其他多余的信息。如果文档结构合理，通常可以形成一个标题大纲，这样不仅可以跳过导航，还能让屏幕阅读器使用者浏览整个页面的信息而不用阅读所有的文字。

这个方法的一个缺点就是，只有屏幕阅读器的用户可以使用这个功能。浏览器并不具备这个功能。这意味着视力正常的键盘用户不能像屏幕阅读器的用户那样跳过一个个链接。

总结：这个方法对屏幕阅读器的用户是非常有效的。

（2）替换阅读顺序

一些开发者使主要内容作为读屏的开始，把导航放到最后。 这种方法显得“跳过导航”链接就没必要了，但是它带来了另一个问题。是不是提供一个“跳到导航”链接呢？这是个非常严峻的问题。习惯了跳过导航的用户可能一不注意就会点去他们本想跳过的导航部分。这会使用户感到困惑。有或者没有“跳到导航”链接，都可能会使想要去导航的用户迷失，想知道这个页面到底有没有导航。

总结：这个想法是好的。但是现阶段把“跳过导航”链接放在页面顶部的约定决定了开发人员也必须这么做，确保用户不会在你的页面感到困惑。