對于信息無障礙設(shè)計,估計很少有設(shè)計師知道。從現(xiàn)實生活到平面設(shè)計,都應(yīng)該有信息無障礙的設(shè)計。那么什么是信息可訪問性?本文AAA教育的武老師介紹了無障礙設(shè)計的研究和應(yīng)用。
信息無障礙是指任何人在任何情況下都能平等、方便、無障礙地獲取和使用信息。隨著互聯(lián)網(wǎng)覆蓋范圍的不斷擴大,對于有限的主體群體來說,通過互聯(lián)網(wǎng)獲取信息更加迫切,這就要求互聯(lián)網(wǎng)產(chǎn)品對信息的獲取進行優(yōu)化。在中國,受益者包括至少8500萬殘疾人和2億60歲以上老人。率先考慮信息無障礙,可以增加產(chǎn)品的優(yōu)勢,帶來更多的用戶。
如今,智能手機掀起了無障礙輔助工具的革命,站在這一關(guān)鍵點上的互聯(lián)網(wǎng)設(shè)計師也應(yīng)該開始行動起來,從以下容易實現(xiàn)的事情著手,無障礙優(yōu)化。
關(guān)于讀屏
對視障用戶來說,是用聽取讀屏語音來了解你設(shè)計的界面信息的。讀屏軟件就像他們了解互聯(lián)網(wǎng)世界的眼睛,它的原理是直接讀出界面里的文字,如果 icon 按鈕未加無障礙標(biāo)簽讀屏?xí)x為”無法發(fā)音”,那么視障者就無法獲取這些信息,自然也就無法使用你設(shè)計的功能。
解決的辦法是:
1.需要在產(chǎn)品代碼中添加無障礙標(biāo)簽( Android :contentDescription ; iOS:accessibilityLabel 在對應(yīng)的開發(fā)者文檔里很容易找到,可以發(fā)給你合作的研發(fā)同學(xué))。
2.裝飾性 icon 可隱藏標(biāo)簽不讀,提升讀屏效率。不建議不做處理也不加標(biāo)簽,那么用戶聽到的就是“無標(biāo)簽”,這樣會讓用戶以為這里有什么重要信息讀不到而感到不安。
3.標(biāo)簽語義簡短準(zhǔn)確,盡可能使用動詞。
4.必要時需要走查焦點順序,確保不會被錯誤的焦點順序誤導(dǎo)頁面含義。
并且最好由設(shè)計師進行語義的標(biāo)注,因為設(shè)計師才是對頁面里圖形應(yīng)用最了解的人。避免出現(xiàn)“搜索”被寫成“放大鏡”、或者是“ searchBtn_123 ”之類的情況。
顏色可以用來區(qū)分信息數(shù)據(jù)的類別和維度,也可以幫助傳達情緒等重要信息。然而,世界上有超過 8% 的男性和 0.4% 的女性都被色覺障礙的問題困擾。我們通?;\統(tǒng)的稱這類人群為“色盲”,他們是典型的識別顏色有問題的群體。
“色彩”的目標(biāo)是”易于感知”,指的是互聯(lián)網(wǎng)產(chǎn)品的內(nèi)容信息的色彩對任何人來說,都應(yīng)該擁有足夠高的辨識度和舒適度,我從以下 4 個方向進行介紹。
1.更安全的配色
a.色盲人群:
設(shè)計師在進行設(shè)計配色時應(yīng)時刻自測,避免明度相似的橙黃綠兩兩配色和明度相似的紅綠配色,因為這樣的配色勢必會造成色盲用戶的可讀性問題。并且,紅色在紅綠色盲眼中并不是一種明亮醒目的顏色。相反紅色對他們來說顯得非常深,而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內(nèi)的深紅色的強調(diào)字,從而遺漏關(guān)鍵信息(設(shè)計時,可利用此插件模擬色盲眼中的顏色:Color Oracle ) 。
b.文化差異:
因為色彩在不同國家文化中代表不同含義,所以對于國際用戶來說也是存在障礙的。在西方文化里,紅色通常用于表示消極趨勢,而綠色則表示積極趨勢,但在東方文化中卻正相反。
c.特殊群體:
臨床醫(yī)學(xué)研究表明對于部分自閉癥患者來說,高飽和高對比度的顏色,甚至只是黃色都會讓他們感到不舒服和不安,因此在自閉癥康復(fù)中心是不會出現(xiàn)過于對比刺激的顏色的。
另外,老年群體隨著年齡的增長,晶狀體變黃變渾濁,會選擇性的吸收藍光,從而導(dǎo)致老年人對藍色的鑒別能力下降明顯,如果你的主流用戶是老年人,請盡量避免將藍色運用到重要的按鍵中去。
2.更強的文本對比度
文本對比度與可讀性息息相關(guān),它測量的文本顏色和背景色之間的明度差。WCAG AA 對于文本對比度的規(guī)范是:4.5:1 ,若字號夠大( >18pt ,或粗體 >14pt )時,標(biāo)準(zhǔn)可降到 3:1 。如果滿足 4.5:1 這個標(biāo)準(zhǔn)會讓你的頁面視覺看起來不那么優(yōu)雅,可以嘗試局部加強可視性的方法:
關(guān)于可讀性其他需要注意的點:盡量不要在圖片上疊加文字,除非你能保證圖片背景顏色單一且對比度足夠高。
Material Design 設(shè)計規(guī)范建議,需要淡淡的遮罩確保上層文字的可讀性;并且不建議極高對比度的文本,因為這樣會使一部分視障者看到的字旋轉(zhuǎn)模糊。
3.更多樣的視覺變量
顏色是數(shù)據(jù)可視化中最常用的視覺變量之一。但是對于無法辨別顏色的用戶,如果顏色作為的唯一的提示信息,他們可能將無法理解你傳達的信息。那么有什么改善的方法呢?
a. 不讓顏色成為唯一的視覺變量:除顏色外,我們可以追加圖標(biāo)、紋理或者文字來加以標(biāo)注。
b.色盲模式: Trello 作為一款工具產(chǎn)品,在標(biāo)注信息時,提供色盲模式可打開和關(guān)閉,并用不同紋理加以區(qū)別,色盲友好模式是一個很好的范例,它可以有效幫助色盲,又不會妨礙非色盲用戶。
c.以明度飽和度為度量:雖然色盲人士對色相的辨識能力較弱,但卻對明度、飽和度非常敏感。我們可以使用明度或飽和度區(qū)分信息??催@個例子:傳統(tǒng)熱力圖習(xí)慣用暖色代表熱力高冷色代表熱力低, Google Analaytics 的熱力圖采用深藍色顯示熱度高的時段、淺藍色顯示熱度低的時段,簡單有效。
關(guān)于控件
控件可以是按鈕、鏈接、輸入框或任何帶有事件監(jiān)聽器的 HTML 元素??丶』虮舜颂拷赡軙o用戶帶來糟糕的體驗問題。
比如對于無法用指尖精確定位的用戶(有顫抖疾病的用戶),或因年齡而導(dǎo)致靈活性降低的老年用戶,都會難以點擊過小控件。
為了給用戶足夠的間距來準(zhǔn)確選擇控件, Material Design 建議至少 48×48dp , iOS 設(shè)計系統(tǒng)將目標(biāo)熱區(qū)尺寸最小值定為 44 x 44pt ,而 WCAG 對 WEB 的規(guī)范則建議至少 44×44px 。一個控件可以在視覺上是 24 x 24px ,但是在所有邊上都會有一個額外的填充使它達到 44×44px 。并且太靠近的控件可能會因誤點擊而帶來挫敗感,所以同時還建議控件之間的空間足夠遠以減少誤觸。Microsoft 給 pc 的建議是至少有 8px 的間距,而 Material Design 推薦的控件至少間隔 8dp 。我們可根據(jù)以上規(guī)范來審視自己設(shè)計的控件。
1.文字大?。?br />
有視覺障礙的用戶可能會把字號調(diào)得很大。你需要保證你的設(shè)計在大字號的情況下內(nèi)容不會溢出或排版錯亂。做設(shè)計的時候,可以使用 2 倍以上的字體測試你的設(shè)計。
在互聯(lián)網(wǎng)早期,設(shè)計了字號在 9-14px 之間的網(wǎng)頁,如今已與 20 年前不同,瀏覽器已經(jīng)可以在任何尺寸設(shè)備上使用,小到智能手表大到 4K 熒幕,我們不能再使用固定的字號來設(shè)計產(chǎn)品了。字號應(yīng)該與設(shè)計本身一樣具有響應(yīng)性。例如可以允許用戶自定義字號、行高或字間距等以達到舒適的閱讀水平。
2.文字樣式:
文字作為傳達信息的重要載體,對于許多用戶來說,裝飾字體或草書字體都是比較難閱讀的。且用過細的、過小的、斜體和全大寫文本,也會降低識別度。
關(guān)于動效
有效的動畫可以給頁面帶來生命感,但如果濫用動效不僅會分散用戶注意力,嚴(yán)重的話對某些用戶來說來說可能是致命的(光敏性癲癇的臨床誘因之一就是閃光圖像的刺激)。
1997 年的一天,日本電視臺正在播放《精靈寶可夢》第 38 集“電腦戰(zhàn)士 3D 龍”,但就在這天晚上發(fā)生了 600 多名兒童昏倒在家中集體送醫(yī)事件,轟動了動畫界,任天堂的股價也隨之大跌。原來,為了達到震撼效果, 3D 龍的背景運用了“藍-紅-藍”的快速閃爍來表現(xiàn)爆炸,這樣高頻率的閃爍刺激了孩子們脆弱的眼睛,導(dǎo)致他們集體患上了急性光敏癥。也因為這件事日本開始著手對動畫片的制作制定規(guī)范。Twitter 在 2019 年為了保護對閃爍圖像敏感的人員安全,也采取了禁用 APNG 動圖格式的措施。
另外 WCAG 2.3.3 官方說明,一些用戶會因滾動頁面的動效(例如緩動和視差滾動)而觸發(fā)大腦前庭疾病從而產(chǎn)生頭暈的癥狀,所以 iOS 、 Mac 、 Windows 10 都具有關(guān)閉動效的功能。
為了避免給特殊人群造成困擾,設(shè)計師在開始做動效之前,應(yīng)該看看以下四條是否滿足:
1.動效每秒閃動不超過 3 次,發(fā)生的閃光區(qū)域不超過超過 25% 否則,光敏癲癇患者會有發(fā)病的風(fēng)險。
2.避免過于夸張的視差和運動效果,因為大腦前庭失調(diào)者會引發(fā)眩暈。
3.避免有多個元素通過不斷移動、閃爍而分散注意力,因為這可能會讓注意力缺陷者產(chǎn)生困擾 。
4.如果有上述情況,需提供一些控件或選項來暫停、隱藏或者更改任何動畫或效果的頻率。
結(jié)語
作為體驗設(shè)計師,研究無障礙設(shè)計會讓我們收獲良多。當(dāng)然,目前所做的改進并非一勞永逸,而是我們與更廣范圍的用戶保持持續(xù)對話的開端。不斷改進產(chǎn)品的無障礙體驗,讓產(chǎn)品更友善,讓美妙的互聯(lián)網(wǎng)的世界變得更平等,我們希望能不斷向這一目標(biāo)前進。這篇文章的內(nèi)容你學(xué)到了嗎,更多資訊請持續(xù)關(guān)注AAA教育~
填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc