|
三、考慮Tab的易用性
更復(fù)雜的交互行為的出現(xiàn)，在不刷新頁面的狀態(tài)下異步更新內(nèi)容，以及如何滿足用戶使用不同訪問方式，包括那些很難確定的非典型狀況下的訪問需求，這些狀況令易用性成為當(dāng)前最熱門的話題。本章節(jié)中，我們將討論一些在設(shè)計(jì)Tab元素時(shí)你應(yīng)該知道的易用性原則。 “選擇”和“未選中”狀態(tài)的標(biāo)簽 應(yīng)該使用對比鮮明的顏色
為了讓視力上有障礙的用戶能分清哪些標(biāo)簽是已選中的，哪些是未選中的，應(yīng)該使用高對比的背景色來做出區(qū)分。
Yahoo! News 網(wǎng)站中的反面案例：選中和未選中狀態(tài)的標(biāo)簽 只有非常小的視覺上的差異，他們對視力好的用戶沒問題，但是會(huì)給視力不佳的用戶帶來麻煩。
此外，請務(wù)必保證標(biāo)簽的文字顏色（前景色）和標(biāo)簽背景色 有充分的對比。即使是未選中的標(biāo)簽，用戶也應(yīng)該能輕松閱讀上面的文字。為了讓未選擇的標(biāo)簽看起來不顯眼，而把它們都直接變灰 是不妥當(dāng)?shù)摹?/p>確保 隱藏內(nèi)容區(qū)里的信息 在語音閱讀器中是可讀的
基于可訪問性，Tab應(yīng)該使用技術(shù)將未選中狀態(tài)的內(nèi)容區(qū)隱藏起來，但是不能在DOM Tree中刪除他們。比如不能使用 display:none; 或者 visibility:none這樣的css參數(shù)去定義容器。這類參數(shù)導(dǎo)致語音閱讀器無法讀取被隱藏的內(nèi)容區(qū)中的信息。
（譯注：中國設(shè)計(jì)師可能不太重視語音閱讀器的可訪問性，但是在國外，有專門的法令條款規(guī)定，機(jī)構(gòu)網(wǎng)站不得歧視有障礙的用戶，包括視力缺陷，行動(dòng)障礙、癲癇患者等，所以外國的產(chǎn)品或前端工程師會(huì)很重視這一點(diǎn)，不然會(huì)遭到投訴甚至起訴。這種差異去看看中國人是如何設(shè)計(jì)盲道的就明白了。）
詳情請見Roger Johansson’s 的文章 《利用css隱藏內(nèi)容：問題和對策》”Hiding with CSS: Problems and solutions“.
（譯注：Roger Johansson’s的文章中指出：許多CSS和JS教程建議使用display:none; visibility:none 來隱藏元素，但大多數(shù)狀況下這是一個(gè)會(huì)降低可訪問性的選擇，。
display:none的真正含義是表示這一元素并不存在，不需要顯示打印或被閱讀。大多數(shù)語音閱讀器會(huì)忽略任何使用display:none來隱藏鏈接，文字，導(dǎo)航和標(biāo)題等。作者建議使用的技術(shù)是使用絕對定位坐標(biāo)，例如 .structural { position:absolute; left:-9999px; } 。
另一個(gè)需要注意的問題是，當(dāng)你決定使用JS去顯示一個(gè)元素時(shí)，也應(yīng)該用JS技術(shù)去隱藏它。因?yàn)榭紤]到客戶端是否支持js以及安全等級，如果客戶端的js沒起作用，可能交互或動(dòng)態(tài)菜單沒效果，但起碼內(nèi)容是可訪問的。但如果你使用css去隱藏一個(gè)元素，但使用js技術(shù)去顯示它，在某些狀況下，這個(gè)元素會(huì)變得一直無法訪問。） 使用語義化的HTML結(jié)構(gòu)來構(gòu)造 Tab的標(biāo)簽。
使用無序或有序列表(譯注：<ul> <li>這類標(biāo)簽）來構(gòu)造標(biāo)簽的html代碼，可以改善可訪問性。因?yàn)槭褂谜Z音閱讀器的用戶可以基于此來識別出這是一組Tab標(biāo)簽。如果標(biāo)簽上使用了圖片來代替文字，別忘了添加ALT 或 title屬性來 描述圖片的含義。 允許鍵盤操作。
鍵盤導(dǎo)航是為一些有行動(dòng)障礙或不能使用常規(guī)輸入設(shè)備（如鼠標(biāo)）的用戶準(zhǔn)備的。這種用戶會(huì)使用替換形式（比如鍵盤或語音）來控制導(dǎo)航菜單，確保他們能將控制焦點(diǎn)在標(biāo)簽間切換，并激活他們想要的部分。
一個(gè)簡單測試鍵盤導(dǎo)航的簡單方法是：使用鍵盤上的Tab鍵，看你是否能將控制焦點(diǎn) 集中在每個(gè)標(biāo)簽上？使用回車鍵，當(dāng)前的控制區(qū)域是否能被激活，使未選中狀態(tài)有效地切換為選中狀態(tài)。 提高對用戶客戶端的兼容性。
當(dāng)客戶端無法支持某些技術(shù)，比如當(dāng)瀏覽器關(guān)閉了JavaScript功能時(shí)，或者 當(dāng)用戶沒有安裝Flash插件時(shí)，Tab內(nèi)容區(qū)上的信息必須保證最基本的可訪問性，交互元素確保能被替換為最基本的html文本。
出處：西喬的九卦
責(zé)任編輯：bluehearts
上一頁 Tab(選項(xiàng)卡)的產(chǎn)品設(shè)計(jì)原則及應(yīng)用 [3] 下一頁 Tab(選項(xiàng)卡)的產(chǎn)品設(shè)計(jì)原則及應(yīng)用 [5]
|
第 1 頁 
第 4 頁 Tab(選項(xiàng)卡)的產(chǎn)品設(shè)計(jì)原則及應(yīng)用 [4]
