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

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

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

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

二、生活中的案例

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

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

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

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

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

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

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

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

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

從這四個(gè)方面提高我們的用戶體驗(yàn)，增強(qiáng)我們的包容性。

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

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

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

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

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

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

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

2）不依賴顏色

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

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

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

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

這些屏幕閱讀器是無法識(shí)別一些icon的，所以當(dāng)icon作為唯一的元素時(shí)，視障人士會(huì)無法識(shí)別信息。

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

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

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

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

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

2）注重文案的撰寫

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

3. 行動(dòng)無障礙設(shè)計(jì)

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

設(shè)計(jì)要點(diǎn)：

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

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

2）語音助理/語音輸入

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

3）確保可點(diǎn)擊區(qū)域足夠大

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

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

4.?認(rèn)知無障礙設(shè)計(jì)

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

設(shè)計(jì)要點(diǎn)：

1. 避免重復(fù)或閃爍的顯示方式，因?yàn)檫@可能會(huì)為認(rèn)知障礙用戶造成使用不便。
2. 給用戶留出充足的時(shí)間操作。

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

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

五、總結(jié)

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

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

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