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