譯者注：文章的英文原名為”Skip Navigation” Links，來自WebAIM。WebAIM組織為網(wǎng)站信息無障礙提供了全面的解決方案。所謂網(wǎng)站信息無障礙指任何人（無論是健全人還是殘疾人，無論是年輕人還是老年人）在任何情況下都能平等的、方便地、無障礙地從網(wǎng)站上獲取信息、利用信息。最近在學(xué)習(xí)無障礙相關(guān)標(biāo)準(zhǔn)與技術(shù)，本文主要探討如何在頁面上設(shè)置一個“跳過導(dǎo)航”鏈接以方便視障人群來使用網(wǎng)站功能。

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

一、概況

在許多模板設(shè)計中都存在一個問題：頁面的主要內(nèi)容并不在頁面的最開始的位置。使用屏幕閱讀器的用戶常常要聽完一長串導(dǎo)航鏈接、次導(dǎo)航鏈接、網(wǎng)站logo、網(wǎng)站搜索框和其他元素后，才能到達(dá)主要內(nèi)容區(qū)域。事實上，鍵盤使用者為了要到達(dá)主內(nèi)容區(qū)域，必須tab過所有的頂部導(dǎo)航鏈接。如下圖，由于頁面布局，導(dǎo)航鏈接分布在頂部和左側(cè)，用戶需要跳過118個鏈接才能到達(dá)內(nèi)容區(qū)。

二、創(chuàng)建“跳過導(dǎo)航“鏈接

鏈接在左邊、右邊還是中間的位置不重要，最重要的是要確保這個鏈接是屏幕閱讀器使用者進(jìn)入頁面后最先聽到的內(nèi)容，同時也是鍵盤最先tab到的內(nèi)容。否則，用戶可能完全沒有意識到還有一個“跳過導(dǎo)航”鏈接，然后浪費時間在跳過那些無關(guān)的鏈接。屏幕閱讀器使用者很容易對此感到不耐煩。

總結(jié)：這種方法是非常有效可行的。

（2）在頁面其他位置放置可見的鏈接

一些開發(fā)者認(rèn)為這樣放置跳過導(dǎo)航鏈接會不美觀，破壞了頁面布局。所以把鏈接移到其他不那么影響頁面整體布局的地方。下面這個例子中，開發(fā)者就把鏈接移到了頁面左下角的位置。

這樣不會顯得那么突兀。但是帶來了一個問題：它不再是這個頁面的第一個鏈接。屏幕閱讀器使用者不能首先聽到這個鏈接，鍵盤使用者也不能第一個tab到它。雖然可以通過設(shè)置鏈接的tabindex屬性來解決，但是假使閱讀器使用者并沒有使用TAB鍵來聽網(wǎng)頁呢？

總結(jié)：這種方法并不是對所有用戶都適合。

（3）不可見的鏈接

一些開發(fā)者決定隱藏這個鏈接。最常用的方法就是在頁面頂部放一個透明的圖片，并設(shè)置它的alt屬性為“跳過導(dǎo)航”。

這解決了在布局的美觀性上的問題。這對閱讀器使用者也是完美的解決方案。然而，那些視力正常的鍵盤使用者看不到這個鏈接。當(dāng)他們tab到這個鏈接的時候，他們不知道有一個鏈接在那，除非他們看到了瀏覽器底部的狀態(tài)欄地址。

另一個類似的方法是使用CSS隱藏鏈接。這個方法比隱藏圖片的方法更好，但是CSS會引起另一個問題：可能閱讀器使用者也讀不到這個鏈接了。更多信息查看“CSS in Action： Invisible Content Just for Screen Reader Users”。

總結(jié)：這種方法并不是對所有用戶都適合。

（4）獲焦后鏈接可見

另一種在美觀和可訪問性兩者之間平衡的方法：當(dāng)鏈接被tab時才顯示。使用鼠標(biāo)的人看不見這個鏈接。不需要“跳過導(dǎo)航”鏈接的用戶完全意識不到這個鏈接。

現(xiàn)在這個鏈接是可見的了。它是頁面的第一個鏈接，所以屏幕閱讀器會首先讀到這個鏈接。這看起來是幾乎完美的解決方案了。唯一的缺陷就是鍵盤使用者要tab到它的時候才能看見。突然的出現(xiàn)可能會有一點令人疑惑。但是，鏈接突然出現(xiàn)會吸引用戶的注意，這樣可以增加用戶點擊它的可能性。在非官方的觀察統(tǒng)計下，用戶對這種方法反應(yīng)良好。

CSS寫法：

#skip a , #skip a:hover , #skip a:visited{position:relative; left:0;top:-500px;width:1px;height:1px;overflow:hidden;}

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

HTML結(jié)構(gòu)：

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

三、哪種文字描述比較好呢？

有不只一種好的方式來描述這個鏈接 。以下是比較常用的幾種：

1. 跳過導(dǎo)航
2. 跳過主要導(dǎo)航
3. 跳過導(dǎo)航鏈接
4. 跳到主內(nèi)容區(qū)
5. 跳到內(nèi)容區(qū)

以上任何一種都很好。

四、瀏覽器怪癖

Windows的IE號稱是最棘手的瀏覽器了。在一些頁面中，“跳過導(dǎo)航”鏈接如預(yù)期的一樣起作用，但是在一些情況中，視線的焦點是改變了，但是輸入焦點并沒有。換句話說，當(dāng)用戶激活了跳過導(dǎo)航鏈接，焦點移到正確的位置，但是當(dāng)用戶再次TAB的時候，焦點重新回到了初始的位置。當(dāng)這種情況發(fā)生時，跳過導(dǎo)航的鏈接就完全沒有意義了。

是什么引起了IE下這個bug呢？事實證明，IE需要錨點在一個定義了寬度的元素內(nèi)。寬度可以是絕對的（如600px）,也可以是相對的（如100%等），但是寬度必須被定義。這個寬度可以定義給一個div，一個表格單元，span標(biāo)簽或者其他元素。

有時在一個特殊的設(shè)計里，找到一個可用的寬度單位是很不方便的。但是讓“跳過導(dǎo)航”鏈接起作用是很必要的。事實上，所有頁面上的每一個錨點都必須在一個定義了寬度的元素里，并不只是跳過導(dǎo)航鏈接的錨點。

五、“跳過導(dǎo)航”的替代方法

事實上，“跳過導(dǎo)航”是一個非常笨拙的方法。他將一直有效，直到有一種劃分導(dǎo)航和主要內(nèi)容的更標(biāo)準(zhǔn)化的方法出現(xiàn)。然后，還有不止一種方法來達(dá)到跳過導(dǎo)航的效果。

（1）按標(biāo)題導(dǎo)航

最有效的辦法就是創(chuàng)建有合適標(biāo)題的文檔結(jié)構(gòu)，這樣用戶就能在標(biāo)題之間跳轉(zhuǎn)。大部分屏幕閱讀器都允許用戶只聽標(biāo)題，跳過段落、圖片、鏈接和其他多余的信息。如果文檔結(jié)構(gòu)合理，通常可以形成一個標(biāo)題大綱，這樣不僅可以跳過導(dǎo)航，還能讓屏幕閱讀器使用者瀏覽整個頁面的信息而不用閱讀所有的文字。

這個方法的一個缺點就是，只有屏幕閱讀器的用戶可以使用這個功能。瀏覽器并不具備這個功能。這意味著視力正常的鍵盤用戶不能像屏幕閱讀器的用戶那樣跳過一個個鏈接。

總結(jié)：這個方法對屏幕閱讀器的用戶是非常有效的。

（2）替換閱讀順序

一些開發(fā)者使主要內(nèi)容作為讀屏的開始，把導(dǎo)航放到最后。 這種方法顯得“跳過導(dǎo)航”鏈接就沒必要了，但是它帶來了另一個問題。是不是提供一個“跳到導(dǎo)航”鏈接呢？這是個非常嚴(yán)峻的問題。習(xí)慣了跳過導(dǎo)航的用戶可能一不注意就會點去他們本想跳過的導(dǎo)航部分。這會使用戶感到困惑。有或者沒有“跳到導(dǎo)航”鏈接，都可能會使想要去導(dǎo)航的用戶迷失，想知道這個頁面到底有沒有導(dǎo)航。

總結(jié)：這個想法是好的。但是現(xiàn)階段把“跳過導(dǎo)航”鏈接放在頁面頂部的約定決定了開發(fā)人員也必須這么做，確保用戶不會在你的頁面感到困惑。

轉(zhuǎn)載：財付通設(shè)計中心