對于信息無障礙設計冯事，估計很少有設計師知道。從現實生活到平面設計血公，都應該有信息無障礙的設計桅咆。那么什么是信息可訪問性?本文介紹了她的研究和應用。
信息無障礙是指任何人在任何情況下都能平等坞笙、方便岩饼、無障礙地獲取和使用信息。隨著互聯網覆蓋范圍的不斷擴大薛夜，對于有限的主體群體來說籍茧，通過互聯網獲取信息更加迫切，這就要求互聯網產品對信息的獲取進行優(yōu)化梯澜。在中國寞冯，受益者包括至少8500萬殘疾人和2億60歲以上老人。率先考慮信息無障礙晚伙，可以增加產品的優(yōu)勢吮龄，帶來更多的用戶。
如今咆疗，智能手機掀起了無障礙輔助工具的革命漓帚，站在這一關鍵點上的互聯網設計師也應該開始行動起來，從以下容易實現的事情著手午磁，無障礙優(yōu)化尝抖。
關于讀屏
對視障用戶來說，是用聽取讀屏語音來了解你設計的界面信息的迅皇。讀屏軟件就像他們了解互聯網世界的眼睛昧辽，它的原理是直接讀出界面里的文字，如果 icon按鈕未加無障礙標簽讀屏會讀為”無法發(fā)音”登颓，那么視障者就無法獲取這些信息搅荞，自然也就無法使用你設計的功能。
解決的辦法是:
1.需要在產品代碼中添加無障礙標簽( Android :contentDescription ; iOS:accessibilityLabel
在對應的開發(fā)者文檔里很容易找到框咙，可以發(fā)給你合作的研發(fā)同學)咕痛。
2.裝飾性 icon
可隱藏標簽不讀，提升讀屏效率扁耐。不建議不做處理也不加標簽暇检，那么用戶聽到的就是“無標簽”产阱，這樣會讓用戶以為這里有什么重要信息讀不到而感到不安婉称。
3.標簽語義簡短準確，盡可能使用動詞。
4.必要時需要走查焦點順序王暗，確保不會被錯誤的焦點順序誤導頁面含義悔据。
并且最好由設計師進行語義的標注，因為設計師才是對頁面里圖形應用最了解的人俗壹。避免出現“搜索”被寫成“放大鏡”科汗、或者是“ searchBtn_123”之類的情況。
關于色彩
顏色可以用來區(qū)分信息數據的類別和維度绷雏，也可以幫助傳達情緒等重要信息头滔。然而，世界上有超過 8% 的男性和 0.4%的女性都被色覺障礙的問題困擾涎显。我們通忱ぜ欤籠統(tǒng)的稱這類人群為“色盲”，他們是典型的識別顏色有問題的群體期吓。
“色彩”的目標是”易于感知”早歇，指的是互聯網產品的內容信息的色彩對任何人來說，都應該擁有足夠高的辨識度和舒適度讨勤，我從以下 4 個方向進行介紹箭跳。
1.更安全的配色
a.色盲人群：
設計師在進行設計配色時應時刻自測，避免明度相似的橙黃綠兩兩配色和明度相似的紅綠配色潭千，因為這樣的配色勢必會造成色盲用戶的可讀性問題谱姓。并且，紅色在紅綠色盲眼中并不是一種明亮醒目的顏色刨晴。相反紅色對他們來說顯得非常深逝段，而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內的深紅色的強調字割捅，從而遺漏關鍵信息(設計時奶躯，可利用此插件模擬色盲眼中的顏色：ColorOracle ) 。
b.文化差異：
因為色彩在不同國家文化中代表不同含義,所以對于國際用戶來說也是存在障礙的亿驾。在西方文化里嘹黔，紅色通常用于表示消極趨勢，而綠色則表示積極趨勢莫瞬，但在東方文化中卻正相反儡蔓。
c.特殊群體：
臨床醫(yī)學研究表明對于部分自閉癥患者來說，高飽和高對比度的顏色疼邀，甚至只是黃色都會讓他們感到不舒服和不安喂江，因此在自閉癥康復中心是不會出現過于對比刺激的顏色的。
另外旁振，老年群體隨著年齡的增長获询，晶狀體變黃變渾濁涨岁，會選擇性的吸收藍光，從而導致老年人對藍色的鑒別能力下降明顯吉嚣，如果你的主流用戶是老年人梢薪，請盡量避免將藍色運用到重要的按鍵中去。
2.更強的文本對比度
文本對比度與可讀性息息相關尝哆，它測量的文本顏色和背景色之間的明度差秉撇。WCAG AA 對于文本對比度的規(guī)范是：4.5:1 ，若字號夠大( >18pt秋泄，或粗體 >14pt )時琐馆，標準可降到 3:1 。如果滿足 4.5:1 這個標準會讓你的頁面視覺看起來不那么優(yōu)雅恒序，可以嘗試局部加強可視性的方法：
關于可讀性其他需要注意的點：盡量不要在圖片上疊加文字啡捶，除非你能保證圖片背景顏色單一且對比度足夠高。
Material Design
設計規(guī)范建議奸焙，需要淡淡的遮罩確保上層文字的可讀性;并且不建議極高對比度的文本瞎暑，因為這樣會使一部分視障者看到的字旋轉模糊。
3.更多樣的視覺變量
顏色是數據可視化中最常用的視覺變量之一与帆。但是對于無法辨別顏色的用戶了赌，如果顏色作為的唯一的提示信息，他們可能將無法理解你傳達的信息玄糟。那么有什么改善的方法呢?
a. 不讓顏色成為唯一的視覺變量：除顏色外勿她，我們可以追加圖標、紋理或者文字來加以標注阵翎。
b.色盲模式： Trello
作為一款工具產品逢并，在標注信息時，提供色盲模式可打開和關閉郭卫，并用不同紋理加以區(qū)別砍聊，色盲友好模式是一個很好的范例，它可以有效幫助色盲贰军，又不會妨礙非色盲用戶玻蝌。
c.以明度飽和度為度量：雖然色盲人士對色相的辨識能力較弱，但卻對明度词疼、飽和度非常敏感俯树。我們可以使用明度或飽和度區(qū)分信息》〉粒看這個例子：傳統(tǒng)熱力圖習慣用暖色代表熱力高冷色代表熱力低许饿，
Google Analaytics 的熱力圖采用深藍色顯示熱度高的時段、淺藍色顯示熱度低的時段舵盈，簡單有效陋率。
關于控件
控件可以是按鈕球化、鏈接、輸入框或任何帶有事件監(jiān)聽器的 HTML 元素翘贮∩蘅控件太小或彼此太靠近可能會給用戶帶來糟糕的體驗問題爆惧。
比如對于無法用指尖精確定位的用戶(有顫抖疾病的用戶)狸页，或因年齡而導致靈活性降低的老年用戶，都會難以點擊過小控件扯再。
為了給用戶足夠的間距來準確選擇控件芍耘， Material Design 建議至少 48×48dp ， iOS 設計系統(tǒng)將目標熱區(qū)尺寸最小值定為 44 x
44pt 熄阻，而 WCAG 對 WEB 的規(guī)范則建議至少 44×44px 斋竞。一個控件可以在視覺上是 24 x 24px，但是在所有邊上都會有一個額外的填充使它達到 44×44px秃殉。并且太靠近的控件可能會因誤點擊而帶來挫敗感坝初，所以同時還建議控件之間的空間足夠遠以減少誤觸。Microsoft 給 pc 的建議是至少有 8px 的間距钾军，而Material Design 推薦的控件至少間隔 8dp 鳄袍。我們可根據以上規(guī)范來審視自己設計的控件。
關于文字
1.文字大欣艄А：
有視覺障礙的用戶可能會把字號調得很大拗小。你需要保證你的設計在大字號的情況下內容不會溢出或排版錯亂。做設計的時候樱哼，可以使用 2
倍以上的字體測試你的設計哀九。
在互聯網早期，設計了字號在 9-14px 之間的網頁搅幅，如今已與 20 年前不同阅束，瀏覽器已經可以在任何尺寸設備上使用，小到智能手表大到 4K熒幕茄唐，我們不能再使用固定的字號來設計產品了围俘。字號應該與設計本身一樣具有響應性。例如可以允許用戶自定義字號琢融、行高或字間距等以達到舒適的閱讀水平界牡。
2.文字樣式:
文字作為傳達信息的重要載體，對于許多用戶來說漾抬，裝飾字體或草書字體都是比較難閱讀的宿亡。且用過細的、過小的纳令、斜體和全大寫文本挽荠，也會降低識別度克胳。
關于動效
有效的動畫可以給頁面帶來生命感，但如果濫用動效不僅會分散用戶注意力圈匆，嚴重的話對某些用戶來說來說可能是致命的(光敏性癲癇的臨床誘因之一就是閃光圖像的刺激)漠另。
1997 年的一天，日本電視臺正在播放《精靈寶可夢》第 38 集“電腦戰(zhàn)士 3D 龍”跃赚，但就在這天晚上發(fā)生了 600
多名兒童昏倒在家中集體送醫(yī)事件笆搓，轟動了動畫界，任天堂的股價也隨之大跌纬傲。原來满败，為了達到震撼效果， 3D
龍的背景運用了“藍-紅-藍”的快速閃爍來表現爆炸叹括，這樣高頻率的閃爍刺激了孩子們脆弱的眼睛算墨，導致他們集體患上了急性光敏癥。也因為這件事日本開始著手對動畫片的制作制定規(guī)范汁雷。Twitter在 2019 年為了保護對閃爍圖像敏感的人員安全净嘀，也采取了禁用 APNG 動圖格式的措施。
另外 WCAG 2.3.3 官方說明侠讯，一些用戶會因滾動頁面的動效(例如緩動和視差滾動)而觸發(fā)大腦前庭疾病從而產生頭暈的癥狀挖藏，所以 iOS 、 Mac继低、 Windows 10 都具有關閉動效的功能熬苍。
為了避免給特殊人群造成困擾，設計師在開始做動效之前，應該看看以下四條是否滿足：
1.動效每秒閃動不超過 3 次，發(fā)生的閃光區(qū)域不超過超過 25% 否則顽素，光敏癲癇患者會有發(fā)病的風險。
2.避免過于夸張的視差和運動效果柄驻，因為大腦前庭失調者會引發(fā)眩暈。
3.避免有多個元素通過不斷移動焙压、閃爍而分散注意力鸿脓，因為這可能會讓注意力缺陷者產生困擾 。
4.如果有上述情況涯曲，需提供一些控件或選項來暫停野哭、隱藏或者更改任何動畫或效果的頻率。
結語
作為體驗設計師幻件，研究無障礙會讓我們收獲良多拨黔。當然，目前所做的改進并非一勞永逸绰沥，而是我們與更廣范圍的用戶保持持續(xù)對話的開端篱蝇。不斷改進產品的無障礙體驗贺待，讓產品更友善，讓美妙的互聯網的世界變得更平等零截，我們希望能不斷向這一目標前進麸塞。
