您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 設(shè)計理論 >> 瀏覽設(shè)計教程

用戶體驗設(shè)計-“跳過導(dǎo)航”鏈接(2)

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

(2)在頁面其他位置放置可見的鏈接

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

transit

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

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

(3)不可見的鏈接

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

usa_jobs

這解決了在布局的美觀性上的問題。這對閱讀器使用者也是完美的解決方案。然而,那些視力正常的鍵盤使用者看不到這個鏈接。當(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)航”鏈接的用戶完全意識不到這個鏈接。

webaim_tabs

tabs_skipnav

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

CSS寫法:

#skip a , #skip a:hover , #skip a:visited{position

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/di1331.html
盤點信息可視化趨勢
阿里巴巴5°專場視覺設(shè)計小析
圖趣網(wǎng)微信
建議反饋
×