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