編輯導(dǎo)語：面對不同用戶群體，產(chǎn)品需要具有“溫度”與包容性，來照顧不同用戶群體的需求。而無障礙設(shè)計的實現(xiàn)可以讓產(chǎn)品考慮到更多樣化的使用場景，提升用戶體驗的同時，幫助自身提高產(chǎn)品的易用性與實用性。本篇文章里，作者對無障礙設(shè)計進行了介紹與總結(jié)，一起來看一下。

一、什么是無障礙設(shè)計？

無障礙設(shè)計這個概念名稱始見于1974年，是聯(lián)合國組織提出的設(shè)計新主張。

無障礙設(shè)計強調(diào)在科學(xué)技術(shù)高度發(fā)展的現(xiàn)代社會，一切有關(guān)人類衣食住行的公共空間環(huán)境以及各類建筑設(shè)施、設(shè)備的規(guī)劃設(shè)計，都必須充分考慮具有不同程度生理傷殘缺陷者和正?；顒幽芰λネ苏撸ㄈ鐨埣踩?、老年人）的使用需求，配備能夠應(yīng)答、滿足這些需求的服務(wù)功能與裝置，營造一個充滿愛與關(guān)懷、切實保障人類安全、方便、舒適的現(xiàn)代生活環(huán)境。

二、生活中的案例

住宅樓入口設(shè)置的坡道，本是方便使用輪椅的用戶出入。但在實際使用中，老人、推自行車的人、拖行李箱的人，甚至一些普通人都更愿意走坡道而非樓梯，因為走坡道更省力。所以坡道的設(shè)計，不僅解決了殘疾人出入的問題，也為普通人提供了更好的體驗。

這是一個在生活中非常常見的案例，無障礙設(shè)計也從方方面面影響著我們的生活，例如電視劇的字幕，就是為了幫助聽障人群看電視所產(chǎn)生的，但很多聽力良好的人也會使用。甚至在一些綜藝節(jié)目中，一些字幕的增加更能加強氣氛感。

三、所有人都存在“殘疾”的情況

大家認知上的“殘疾”一般泛指較為明顯的永久性殘疾，例如眼盲、耳聾、使用輪椅行動等，我們國家殘疾人總數(shù)有8502萬，這是2010年的人口普查計算出來我們國家的殘疾人人數(shù)，涉及到全國1/3家庭?？梢娺@一部分人口占有的數(shù)量是非常龐大的。

那么除了這些人之外，實際上“殘疾”這個概念廣泛存在。例如當你雙手提重物，無法使用手指觸屏解鎖；或是面部存在一些遮擋物，無法使用面部識別功能，這些都屬于情境性障礙（situational disability）或臨時性障礙（temporary disability）。所有人幾乎每天都會遇到這些情境性和臨時性的障礙。

作為用戶體驗設(shè)計師，我們不難發(fā)現(xiàn)通過關(guān)注更多無障礙設(shè)計，可以幫助我們考慮到100%的用戶和使用場景。

四、通過四個方面考慮無障礙設(shè)計

在web設(shè)計上，我們可以通過四個主要方面，來考慮無障礙設(shè)計：

1. 視覺無障礙設(shè)計（visual）；
2. 聽覺無障礙設(shè)計（hearing）；
3. 行動無障礙設(shè)計（mobility）；
4. 認知無障礙設(shè)計（cognition）。

從這四個方面提高我們的用戶體驗，增強我們的包容性。

1. 視覺無障礙設(shè)計

視覺障礙的范圍一般很廣，視力不好的癥狀包括視力模糊、朦朧、高度遠視或近視、色盲和管狀視。視覺障礙者在看計算機屏幕上的文字或圖像、執(zhí)行需要眼和手配合（如移動計算機鼠標）的任務(wù)時有時存在一定困難。

在設(shè)計中，我們需要考慮以下幾點：

1）關(guān)注對比度

根據(jù)W3C（萬維網(wǎng)聯(lián)盟）發(fā)布的幫助殘障人士有效獲得Web信息的無障礙指南（WCAG）中規(guī)定：web中的小文本和它的背景色之間至少有4.5:1的對比度，大文本（加粗的14pt/普通的18pt及以上）和他的背景色之間至少有3:1的對比度。低于這些對比度，會導(dǎo)致一些老花、白內(nèi)障、色盲患者等視障人群，無法識別文本。

所以在設(shè)計中，我們要注意文本與背景的對比度?。

當然市面上也存在一些色彩對比度檢查器來幫助你更好完成工作：https://webaim.org/resources/contrastchecker/

2）不依賴顏色

在一些色盲患者眼中（包括紅綠色盲、藍黃色盲和單色色盲），他們眼中顏色的變化如下圖一所示，當我們僅僅使用顏色的變化來提示錯誤時，他們無法接收到這些信息。所以我們不能單單只依靠顏色傳達諸如「 狀態(tài)指示、區(qū)分視覺控件、實時響應(yīng)」等信息，除了顏色外還需要增加設(shè)計元素，以確保他們能接收到和正常人等量的信息。

對于重要的狀態(tài)，可以同時使用多個視覺提示。使用下劃線、指示符、圖案或文本等元素來描述操作和內(nèi)容。

3）ICON不能作為唯一的元素

視障人士會使用屏幕閱讀器，也叫讀屏軟件作為輔助工具來進行閱讀，通過朗讀出屏幕上的內(nèi)容，讓視障人士不用看屏幕就能操作電腦、手機等電子設(shè)備。常見產(chǎn)品有安卓的TalkBack，iOS和Mac OS的Voice Over，Windows的JAWS、NVDA（國產(chǎn)的有爭渡、永德）等。

這些屏幕閱讀器是無法識別一些icon的，所以當icon作為唯一的元素時，視障人士會無法識別信息。

2. 聽覺無障礙設(shè)計

聽覺障礙又稱聽覺受損，是指感測或理解聲音的能力的完全或部分降低。

在設(shè)計中我們需要注意以下幾點，來幫助聽覺障礙者使用產(chǎn)品。

1）確保所有的功能在沒有聲音時，仍可正常使用

VUI設(shè)計（即語音體驗設(shè)計），是一種通過語音快速完成傳統(tǒng)點擊多次任務(wù)的全新解決方式，但這種單純地依托語音的信息輸入與輸出的方式，對于說話或聽力障礙人群來說是一種奢望。就例如“天貓精靈”、“小愛同學(xué)”等設(shè)備對于聽力障礙用戶來說，就是無法使用的工具。

2）注重文案的撰寫

保證文字表達的暢通，并且讓文本內(nèi)容易于理解，適當使用「文字替代」方案。例如聽障人士觀看視頻時，可以啟用文字對原用音頻進行解說。這一行為不僅能幫助聽障人群使用，也可以在嘈雜環(huán)境時，幫助普通用戶理解界面的信息提示。

3. 行動無障礙設(shè)計

行動障礙包括：不能操作鼠標、鍵盤、或觸屏，以及普遍意義上的肢體障礙用戶。

設(shè)計要點：

1）提供可用鍵盤控制的「獲得焦點」顯示狀態(tài)

這些用戶往往只能使用鼠標或單個按鈕來完成所有操作，所以我們要確保所有界面控件交互都可只通過鍵盤完成（ functionally accessible from a keyboard ）或者只使用鼠標，并且控制的「焦點」狀態(tài)要顯而易見，例如下圖中：選中的tab和選中的按鈕?。

2）語音助理/語音輸入

語音技術(shù)讓有肢體障礙的用戶可以更方便地操作手機、查資料、打字，但語音助手能做的事情有限，語音輸入的環(huán)境也存在局限性。

3）確?？牲c擊區(qū)域足夠大

當按鈕過小、排列緊湊時，肢體障礙的用戶用起來會非常吃力，對于四肢健全的用戶也很容易進行誤觸，尤其是使用單手操作、顛簸環(huán)境時，點錯按鈕會讓人抓狂。所以要確保按鈕的可點擊區(qū)域足夠大，就可以減少這種情況的發(fā)生。

WCAG規(guī)范和iOS平臺的規(guī)范是：所有可點擊元素的尺寸不能小于44x44px（iOS端是44x44pt）。安卓平臺的規(guī)范更嚴格一點，不能小于48x48dp。

4.?認知無障礙設(shè)計

認知障礙的范圍非常廣，包括記憶力、學(xué)習(xí)或語言能力、注意力、情緒控制等方面，認知障礙意味著用戶可能需要輔助技術(shù)來幫助他們閱讀文本，所以「文本替代方案」非常重要。

設(shè)計要點：

1. 避免重復(fù)或閃爍的顯示方式，因為這可能會為認知障礙用戶造成使用不便。
2. 給用戶留出充足的時間操作。

例如一些老年人，他們的行動已經(jīng)變得非常緩慢，對于文字的理解也需要比年輕人多的時間，那么一些彈窗的顯示時間就需要延長，快捷鍵用明顯文字展現(xiàn)。

下圖這款音樂播放軟件，為了照顧老年人不斷下降的身體機能而做出的調(diào)整，眼睛看不清，就把字體放大點，顏色調(diào)亮點；耳朵聽不清，就提供了一鍵最大聲的功能。

五、總結(jié)

1. 通過對無障礙設(shè)計的了解，可以考慮到更具有廣泛的使用場景和更多樣性的用戶，這會讓你的產(chǎn)品更實用。
2. 無障礙會驅(qū)動創(chuàng)新，嘗試從無障礙的出發(fā)點來尋找用戶問題，會讓你的解決方案受益更多人。
3. 通過關(guān)注視障用戶、肢體障礙用戶的需求，可以幫助你的產(chǎn)品更簡單一致、更直觀。

本文由@齊治設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議