用戶體驗(yàn)設(shè)計(jì)-“跳過(guò)導(dǎo)航”鏈接(2)

總結(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è)鏈接，鍵盤使用者也不能第一個(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ì)閱讀器使用者也是完美的解決方案。然而，那些視力正常的鍵盤使用者看不到這個(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)是幾乎完美的解決方案了。唯一的缺陷就是鍵盤使用者要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