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

译者注：文章的英文原名为”Skip Navigation” Links，来自WebAIM。WebAIM组织为网站信息无障碍提供了全面的解决方案。所谓网站信息无障碍指任何人（无论是健全人还是残疾人，无论是年轻人还是老年人）在任何情况下都能平等的、方便地、无障碍地从网站上获取信息、利用信息。最近在学习无障碍相关标准与技术，本文主要探讨如何在页面上设置一个“跳过导航”链接以方便视障人群来使用网站功能。

一、概况

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

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

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

1. 在页面顶部提供可见的链接
2. 在页面其他地方提供可见的链接
3. 使链接隐藏
4. 先隐藏链接，直至它获得键盘焦后再显示

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

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

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