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

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

一、概況

在許多模板設(shè)計(jì)中都存在一個(gè)問(wèn)題：頁(yè)面的主要內(nèi)容并不在頁(yè)面的最開始的位置。使用屏幕閱讀器的用戶常常要聽完一長(zhǎng)串導(dǎo)航鏈接、次導(dǎo)航鏈接、網(wǎng)站logo、網(wǎng)站搜索框和其他元素后，才能到達(dá)主要內(nèi)容區(qū)域。事實(shí)上，鍵盤使用者為了要到達(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)于其他。這里要討論的方法如下：

1. 在頁(yè)面頂部提供可見的鏈接
2. 在頁(yè)面其他地方提供可見的鏈接
3. 使鏈接隱藏
4. 先隱藏鏈接，直至它獲得鍵盤焦后再顯示

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

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

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