用戶體驗(yàn)設(shè)計(jì)-“跳過導(dǎo)航”鏈接(2)
總結(jié):這種方法是非常有效可行的。
(2)在頁面其他位置放置可見的鏈接
一些開發(fā)者認(rèn)為這樣放置跳過導(dǎo)航鏈接會(huì)不美觀,破壞了頁面布局。所以把鏈接移到其他不那么影響頁面整體布局的地方。下面這個(gè)例子中,開發(fā)者就把鏈接移到了頁面左下角的位置。
這樣不會(huì)顯得那么突兀。但是帶來了一個(gè)問題:它不再是這個(gè)頁面的第一個(gè)鏈接。屏幕閱讀器使用者不能首先聽到這個(gè)鏈接,鍵盤使用者也不能第一個(gè)tab到它。雖然可以通過設(shè)置鏈接的tabindex屬性來解決,但是假使閱讀器使用者并沒有使用TAB鍵來聽網(wǎng)頁呢?
總結(jié):這種方法并不是對(duì)所有用戶都適合。
(3)不可見的鏈接
一些開發(fā)者決定隱藏這個(gè)鏈接。最常用的方法就是在頁面頂部放一個(gè)透明的圖片,并設(shè)置它的alt屬性為“跳過導(dǎo)航”。
這解決了在布局的美觀性上的問題。這對(duì)閱讀器使用者也是完美的解決方案。然而,那些視力正常的鍵盤使用者看不到這個(gè)鏈接。當(dāng)他們tab到這個(gè)鏈接的時(shí)候,他們不知道有一個(gè)鏈接在那,除非他們看到了瀏覽器底部的狀態(tài)欄地址。
另一個(gè)類似的方法是使用CSS隱藏鏈接。這個(gè)方法比隱藏圖片的方法更好,但是CSS會(huì)引起另一個(gè)問題:可能閱讀器使用者也讀不到這個(gè)鏈接了。更多信息查看“CSS in Action: Invisible Content Just for Screen Reader Users”。
總結(jié):這種方法并不是對(duì)所有用戶都適合。
(4)獲焦后鏈接可見
另一種在美觀和可訪問性兩者之間平衡的方法:當(dāng)鏈接被tab時(shí)才顯示。使用鼠標(biāo)的人看不見這個(gè)鏈接。不需要“跳過導(dǎo)航”鏈接的用戶完全意識(shí)不到這個(gè)鏈接。
現(xiàn)在這個(gè)鏈接是可見的了。它是頁面的第一個(gè)鏈接,所以屏幕閱讀器會(huì)首先讀到這個(gè)鏈接。這看起來是幾乎完美的解決方案了。唯一的缺陷就是鍵盤使用者要tab到它的時(shí)候才能看見。突然的出現(xiàn)可能會(huì)有一點(diǎn)令人疑惑。但是,鏈接突然出現(xiàn)會(huì)吸引用戶的注意,這樣可以增加用戶點(diǎn)擊它的可能性。在非官方的觀察統(tǒng)計(jì)下,用戶對(duì)這種方法反應(yīng)良好。
CSS寫法:
#skip a , #skip a:hover , #skip a:visited{position
本文地址:http://m.likemindfilms.com/tutorial/di1331.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏