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

十多年的定西網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整定西建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“定西網(wǎng)站設(shè)計(jì)”,“定西網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

一、概況

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

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

很簡(jiǎn)單：在頁(yè)面頂部提供一個(gè)可以使用戶可以直接跳到主要內(nèi)容的鏈接。在大多數(shù)情況下，它確實(shí)很容易，有不只一種方法來(lái)實(shí)現(xiàn)。一些方法也優(yōu)于其他。這里要討論的方法如下：

在頁(yè)面頂部提供可見(jiàn)的鏈接

在頁(yè)面其他地方提供可見(jiàn)的鏈接

使鏈接隱藏

先隱藏鏈接，直至它獲得鍵盤(pán)焦后再顯示

（1）在頁(yè)面頂部提供可見(jiàn)的鏈接

創(chuàng)建一個(gè)跳過(guò)導(dǎo)航鏈接最簡(jiǎn)單的方法就是把它放在頁(yè)面頂部，把響應(yīng)錨點(diǎn)放到主內(nèi)容區(qū)域開(kāi)始的位置。

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

跳過(guò)導(dǎo)航

標(biāo)題

第一段

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

（2）在頁(yè)面其他位置放置可見(jiàn)的鏈接

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

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

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

（3）不可見(jiàn)的鏈接

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

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

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

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

（4）獲焦后鏈接可見(jiàn)

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

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

CSS寫(xiě)法：

#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結(jié)構(gòu)：

skip to man content

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

有不只一種好的方式來(lái)描述這個(gè)鏈接 。以下是比較常用的幾種：

跳過(guò)導(dǎo)航

跳過(guò)主要導(dǎo)航

跳過(guò)導(dǎo)航鏈接

跳到主內(nèi)容區(qū)

跳到內(nèi)容區(qū)

以上任何一種都很好。

四、瀏覽器怪癖

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

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

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

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

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

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

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

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

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

（2）替換閱讀順序

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

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

網(wǎng)頁(yè)標(biāo)題：“跳過(guò)導(dǎo)航”方便視障人群來(lái)使用網(wǎng)站
文章位置：http://www.rwnh.cn/article10/cpgpdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站策劃、網(wǎng)站排名、網(wǎng)頁(yè)設(shè)計(jì)公司、App設(shè)計(jì)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)