關(guān)于無(wú)障礙的問題，近年來已經(jīng)受到越來越多的關(guān)注，不止移動(dòng)端，桌面端也需要進(jìn)行無(wú)障礙設(shè)計(jì)。那么桌面端應(yīng)該如何實(shí)現(xiàn)無(wú)障礙設(shè)計(jì)呢？本文作者對(duì)此進(jìn)行了分析，一起來看一下吧。

最近，有同學(xué)咨詢一個(gè)問題：“桌面端的產(chǎn)品需要無(wú)障礙設(shè)計(jì)嗎？”

作為一名設(shè)計(jì)師，我的求生欲告訴我，肯定需要。但是對(duì)于桌面端應(yīng)該如何實(shí)現(xiàn)無(wú)障礙設(shè)計(jì)，我并不確定。

因此，我進(jìn)行了詳細(xì)的研究。隨著調(diào)查的深入，越發(fā)認(rèn)識(shí)到這個(gè)問題并不簡(jiǎn)單。我決定分享我所知道的調(diào)研結(jié)果，也希望能對(duì)大家有所幫助。

一、無(wú)障礙設(shè)計(jì)為誰(shuí)服務(wù)？

提到無(wú)障礙設(shè)計(jì)，許多人可能首先想到殘障人士。但殘障人士的范疇實(shí)在是過于龐大。作為設(shè)計(jì)師，如果我們要為他們提供服務(wù)，就需要對(duì)殘障人士進(jìn)行相應(yīng)的劃分。只有了解不同殘障人士所面臨的主要問題，才能更好地進(jìn)行設(shè)計(jì)。

目前，行業(yè)內(nèi)將殘障人士分為以下四類：

1）視障人士

主要涉及視力方面問題，包括視力低下、色盲、色弱和失明。

2）聽障人士

雙耳聽力喪失或聽覺障礙，包括全聾、重聽和聽力弱化。很多雙耳全聾的人也無(wú)法正常說話，因此通常使用手語(yǔ)進(jìn)行溝通。除全聾外，還有許多聽力弱化的人，如我的父親左耳聽不到聲音。

3）年長(zhǎng)人士

隨著年齡增長(zhǎng)，記憶力、視力、聽力和辨別能力會(huì)嚴(yán)重下降。許多老人連最基本的手機(jī)也無(wú)法使用，因此需要提供“棒棒機(jī)”來服務(wù)于他們（四川的俗語(yǔ)，簡(jiǎn)稱老年機(jī)）為此小米的多親手機(jī)就非常流行。

4）運(yùn)動(dòng)障礙人士

主要指四肢不靈活或需要使用輔助設(shè)施的人，以及在某些環(huán)境下無(wú)法正常通過手部操作的人。例如B站的心理咨詢師朱銘駿，他是一名高位截肢的消防員，依舊能夠通過嘴巴控制鼠標(biāo)按鍵上網(wǎng)打英雄聯(lián)盟。

上面講到的這幾類人士也是我們目前 互聯(lián)網(wǎng)無(wú)障礙設(shè)計(jì) 我所能想到的用戶，并且在不同類型上，無(wú)障礙人士的人數(shù)分布上也會(huì)有所不同，情況如下：

• 視障人士：1700W+
• 聽障人士：7000W+
• 年長(zhǎng)人士：20000W+

因此，我們不能忽視這類需求，為此國(guó)家也推行了很多政策來優(yōu)化這種情況。

二、 無(wú)障礙的重視程度

關(guān)于無(wú)障礙問題，近年來已經(jīng)受到越來越多的關(guān)注。在移動(dòng)行業(yè)中，我們可以發(fā)現(xiàn)移動(dòng)端對(duì)于無(wú)障礙的支持已經(jīng)相對(duì)較為友好，很多軟件都推出了自己的 無(wú)障礙模式/老年模式，國(guó)家層面也出臺(tái)相應(yīng)法規(guī)，強(qiáng)制要求無(wú)障礙的信息化產(chǎn)品必須改造。

例如在支付寶中，它的老年模式就是將頁(yè)面進(jìn)行重新排布，通過：字體放大、減少?gòu)V告、保留核心功能等做法，將產(chǎn)品的老年模式快速上架。

同時(shí)在代碼層面，也要求軟件的代碼更為干凈，以滿足用戶的無(wú)障礙需求。

關(guān)于這部分內(nèi)容，大家可以在網(wǎng)上搜索很多相關(guān)的咨詢，這里我們就不再進(jìn)行過多的贅述。

三、無(wú)障礙的實(shí)施方案

關(guān)于無(wú)障礙的解決方案，特別是在桌面端產(chǎn)品的無(wú)障礙解決方案，目前市面上比較成熟的一共有以下幾種方案：

1. 讀屏丨主要針對(duì)視障人士

簡(jiǎn)單來說，讀屏就是將手機(jī)當(dāng)中的信息通過聲音的形式快速閱讀。

通常閱讀會(huì)包含它的類型以及內(nèi)容，比如 下圖當(dāng)中的按鈕，通過讀屏軟件就會(huì)閱讀為：“鏈接-網(wǎng)頁(yè)，鏈接-資訊，鏈接-視頻。”

當(dāng)然能夠?qū)⑦@些信息讀出來，是一種非常理想的狀態(tài)。因?yàn)殡S著互聯(lián)網(wǎng)的不斷發(fā)展，界面當(dāng)中的雜糅信息越來越多，各種彈窗廣告、鏈接跳轉(zhuǎn)、圖片混亂，導(dǎo)致這些信息真正能夠被系統(tǒng)讀屏閱讀出來其實(shí)是非常困難。

所以在實(shí)際的使用當(dāng)中，非常容易會(huì)出現(xiàn)下圖這種情況。

在移動(dòng)端，iOS 對(duì)于讀屏的支持非常的好。我們可以打開 手機(jī)系統(tǒng)當(dāng)中的設(shè)置 – 輔助功能 – 朗讀內(nèi)容 進(jìn)行打開。

而在桌面端對(duì)于視障人士的解決方案，主要有以下幾種：

1）系統(tǒng)層級(jí) – 朗讀內(nèi)容

在 Win 以及 Mac 當(dāng)中，都會(huì)默認(rèn)提供類似的功能，因此視障人士使用自己的電腦上網(wǎng)，其實(shí)是有相應(yīng)的功能來提供類似能力。

2）應(yīng)用層級(jí) – 無(wú)障礙工具

剛才講的工具，主要都是針對(duì)于系統(tǒng)層面。那假設(shè)現(xiàn)在給到你一個(gè)場(chǎng)景。我是一名視障人士，假設(shè)我在別人的電腦當(dāng)中要進(jìn)入到一個(gè)網(wǎng)頁(yè)去做相應(yīng)的操作，這時(shí)候我應(yīng)該怎么辦？

因此應(yīng)用層面的工具，可以幫助到上面這個(gè)場(chǎng)景的用戶去做使用。那關(guān)于應(yīng)用層面的無(wú)障礙工具，主要是在瀏覽器當(dāng)中去封裝一個(gè)工具插件。

我們可以打開 知乎、百度貼吧、等網(wǎng)站，在網(wǎng)站的角落都會(huì)提供這樣一個(gè)無(wú)障礙入口，提示可以進(jìn)入無(wú)障礙模式。

點(diǎn)擊過后，網(wǎng)站頂部會(huì)展示一個(gè)操作區(qū)域，這便是應(yīng)用層級(jí)的無(wú)障礙工具。

這個(gè)工具在讀屏部分主要包含有以下幾種功能：

①讀屏設(shè)置

通過鼠標(biāo)hover，能夠快速閱讀頁(yè)面信息，為視障人士提供便利。我們可以在讀屏設(shè)置中設(shè)定閱讀速度，快速跳轉(zhuǎn)到對(duì)應(yīng)模塊，并啟用大字幕。

在鼠標(biāo)hover時(shí)，主要閱讀網(wǎng)頁(yè)信息的類型和內(nèi)容，例如頂部的導(dǎo)航中，選擇頂部信息閱讀則為：鏈接；網(wǎng)頁(yè)，鏈接；資訊，鏈接；視頻。

②內(nèi)容定位

通過 Alt+ 1、2、3、4、5、6，來實(shí)現(xiàn)對(duì)內(nèi)容區(qū)域的快速定位，因?yàn)樵谡麄€(gè)網(wǎng)頁(yè)當(dāng)中，頁(yè)面非常的長(zhǎng)，對(duì)于本身就是弱勢(shì)的殘障人士來說，就是可以將網(wǎng)頁(yè)當(dāng)中的多個(gè)內(nèi)容進(jìn)行定位，進(jìn)行實(shí)現(xiàn)錨點(diǎn)的快速跳轉(zhuǎn)。

③大字幕

通過文字快速展示鼠標(biāo)hover的內(nèi)容。這樣便于弱視群體能夠識(shí)別網(wǎng)站當(dāng)中的內(nèi)容。

這里的交互不太容易理解，建議大家去網(wǎng)站上體驗(yàn)體驗(yàn)~

2. 放大丨主要針對(duì)視弱的用戶

放大則是將頁(yè)面顯示的信息放大，進(jìn)而可以查看更多的內(nèi)容。我原本以為放大是一個(gè)沒什么用的功能，但是直到看到真的有殘障人士通過放大頁(yè)面，去寫 vue3 的前端代碼，讓我感到很吃驚。

放大主要針對(duì)的是 **視力障礙、視力較弱** 的人，通過頁(yè)面放大，他們也能看清顯示器的內(nèi)容，而這種方式也會(huì)分為兩種，系統(tǒng)層級(jí)與應(yīng)用層級(jí)。

1）系統(tǒng)層級(jí) – 放大器

讀屏軟件主要是幫助失明的用戶去使用電腦。而放大器更多是為了幫助低視力的人群來去使用。

它的功能非常簡(jiǎn)單，就是放大屏幕當(dāng)中的頁(yè)面內(nèi)容，進(jìn)而能夠給讓低視力的用戶看信息更為清晰。這個(gè)同樣在 Win 和 Mac 上都有類似工具。

在 Mac 當(dāng)中就是打開 輔助功能-縮放 ，勾選鍵盤鎖縮放就可以縮放整個(gè)屏幕，隨后我只需要按住 Command+Alt+8 就可以實(shí)現(xiàn)快速的縮放效果。

2）應(yīng)用層面-瀏覽器放大

在瀏覽器當(dāng)中，首先我們可以通過 ctrl+ ctrl- 快速縮放整個(gè)瀏覽器頁(yè)面，只是整體頁(yè)面的比例會(huì)有調(diào)整。

同時(shí)也可以使用剛才提到的工具，去縮放瀏覽器，不過它的縮放會(huì)有相應(yīng)限制，一般只能縮放到 130%

3. 變色丨色弱的支持

變色的設(shè)計(jì)主要在顯示器上去做調(diào)整，因?yàn)檫@部分內(nèi)容很少能夠在個(gè)別應(yīng)用當(dāng)中體現(xiàn)，所以在顯示器上，我們可以設(shè)置 藍(lán)、綠、紅 三種顏色的比例進(jìn)而實(shí)現(xiàn)對(duì)色弱用戶的支持。

在網(wǎng)頁(yè)設(shè)計(jì)中，也可以采用相同的解決方案來提供配色的選擇。用戶可以點(diǎn)擊配色選項(xiàng)，切換不同的配色風(fēng)格。將白色背景換成其他顏色，以支持色弱人士。

當(dāng)然在設(shè)計(jì)時(shí)，我們同樣需要去考慮一些特殊情況，比如 驗(yàn)證碼的設(shè)計(jì)，如果是色弱用戶他究竟能不能夠點(diǎn)擊。

4. 語(yǔ)音顯示丨將聲音轉(zhuǎn)換為文字

看到這個(gè)，想到的就只有羅老師的 TNT ，其中炸語(yǔ)音就是將視頻的音頻快速轉(zhuǎn)化為文字。

最近在很多網(wǎng)站上都出現(xiàn)了類似功能，比如斗魚直播，有字幕功能；Youtube B 站也有字幕的顯示，目的都是語(yǔ)音直接展示成為文字。

這樣就能夠幫助聽障人士，通過字幕來了解視頻當(dāng)中的文字內(nèi)容。

5. 無(wú)鼠標(biāo)操作丨滿足特殊的使用場(chǎng)景

我記得在阿里云的一次設(shè)計(jì)分享會(huì)當(dāng)中，著重強(qiáng)調(diào)了無(wú)鼠標(biāo)操作。就是我們只有鍵盤也能夠在阿里云上完成具體的使用操作。針對(duì)這種特殊場(chǎng)景，阿里云主要完成的表示鼠標(biāo) Hover 時(shí)的操作體驗(yàn)。

其實(shí)其目的也非常簡(jiǎn)單，因?yàn)榇蠖鄶?shù)情況下鼠標(biāo)媒介對(duì)于設(shè)計(jì)師來說都是非常重要的一種形式，我們通過 無(wú)鼠標(biāo)的方式，就能夠解決用戶在沒有鼠標(biāo)這種特殊的狀態(tài)當(dāng)中，也能夠保證他的體驗(yàn)最底線，因此這對(duì)于這款產(chǎn)品來說也是一個(gè)無(wú)障礙設(shè)計(jì)。

不過在進(jìn)入到現(xiàn)在的阿里云網(wǎng)站當(dāng)中，無(wú)論是官網(wǎng)還是管理后臺(tái)，似乎都不太成立，因?yàn)闆]辦法使用。

四、無(wú)障礙在網(wǎng)頁(yè)端的體現(xiàn)

1. 真的需要無(wú)障礙么？

關(guān)于這個(gè)問題，在了解完所有的無(wú)障礙內(nèi)容過后，自己也在思考，真的有必要嗎？我想引用之前生活當(dāng)中的一件事，希望能夠?qū)Υ蠹矣兴鶈l(fā)。

在去年的一個(gè)深夜當(dāng)中，當(dāng)時(shí)大概是凌晨的 3 點(diǎn)左右，我家門外傳來了非常猛烈的敲門聲，還在睡夢(mèng)當(dāng)中的我迷迷糊糊的走到門前，因?yàn)槭巧钜刮蚁乱庾R(shí)提高警惕，不敢開門。透過貓眼一看是一個(gè)外賣員，我就在門外喊話說，我沒有點(diǎn)外賣，然后門外的外賣員焦急地指著訂單，然后不停地敲門。這樣的博弈持續(xù)了 15 分鐘以后（中間是不停的拉扯，我就不贅述）。

我最終非常小心地打開了門，透過門縫觀察這個(gè)外賣員，然后他焦急地指了指手中的訂單，然后給我不停地指電話地址，我突然意識(shí)到他是一個(gè)聾啞人士，于是我便讓他撥打電話，隨后讓這個(gè)顧客下樓取餐（篇幅關(guān)系，中間其實(shí)還有很長(zhǎng)的溝通時(shí)間，就省略了）。

當(dāng)時(shí)這個(gè)外賣員他是沒有任何辦法，因?yàn)轭櫩偷牡刂峰e(cuò)誤導(dǎo)致了他在這里浪費(fèi)了非常多的時(shí)間。隨后我又會(huì)想，為什么這位外賣員會(huì)選擇深夜送餐，可能就是因?yàn)樯钜谷松佟蝺r(jià)高，他能夠跑更少的訂單掙更多的錢……

而對(duì)于無(wú)障礙的設(shè)計(jì)也是一樣，因?yàn)槭褂玫娜巳翰皇俏覀冞@群正常人，我們根本沒有辦法去評(píng)判這個(gè)設(shè)計(jì)的好壞，而在很多產(chǎn)品的基礎(chǔ)設(shè)計(jì)當(dāng)中，我們要去考慮殘障人士的使用問題。

（最近也發(fā)現(xiàn)餓了么上線了溝通障礙騎士）

2. 軟件設(shè)計(jì)的細(xì)節(jié)

在我們?nèi)粘５脑O(shè)計(jì)當(dāng)中，也要注意無(wú)障礙的支持場(chǎng)景，這里給大家舉一些例子。

比如在企業(yè)微信的注冊(cè)頁(yè)面時(shí)，微信團(tuán)隊(duì)考慮到會(huì)有年長(zhǎng)的用戶群體，因此我們?cè)佥斎胩?hào)碼是企業(yè)微信的數(shù)字，會(huì)默認(rèn)放大來提示用戶，并且會(huì)根據(jù)不同的分段來讓用戶對(duì)號(hào)碼進(jìn)行校驗(yàn)。

而這其實(shí)就是針對(duì)，我們?cè)阡浫雸?chǎng)景是需要去思考的內(nèi)容，特別是在很多，有年長(zhǎng)用戶的，后面端產(chǎn)品當(dāng)中，我們需要通過這種方案來盡可能多的去兼容

再比如，在使用百度搜索相關(guān)信息之后，我們?nèi)绾慰焖俜祷厮阉骺虿⒄{(diào)整我們的搜索關(guān)鍵詞呢？我以前的方法是將鼠標(biāo)移動(dòng)到搜索框中，現(xiàn)在我們可以通過按住斜杠鍵（/）快速聚焦光標(biāo)，從而實(shí)現(xiàn)無(wú)鼠標(biāo)的全程操作。

（之前百度還會(huì)有提示，現(xiàn)在沒有了，遂不能截圖）

3. 代碼庫(kù)鑲嵌

剛才我們看到各大網(wǎng)站里面對(duì)于無(wú)障礙模式的支持，其中包括貼吧，知乎。微博等等。那這些網(wǎng)站他們的這個(gè)技術(shù)是從何而來？如果我想要做應(yīng)該怎么辦？

其實(shí)這都是源自一個(gè)代碼庫(kù)：Tagalta。

我們只需要引用這個(gè)代碼，就能夠?qū)崿F(xiàn)剛才的所有功能。但是這個(gè)代碼庫(kù)它本身是需要付費(fèi)的。為此我在網(wǎng)上也尋找了一些平替的方案。

在github上面有一個(gè)開源的方案，如果你對(duì)這部分要求不高我們可以直接引用。

[http://www.tagalta.com]

4. 自制老年模式

最近在瀏覽知乎的時(shí)候，發(fā)現(xiàn)他們網(wǎng)站上除了無(wú)障礙模式之外，還會(huì)有一個(gè)全新的功能，老年模式。

點(diǎn)擊了過后，發(fā)現(xiàn)其實(shí)就是將上訴提到的功能進(jìn)行重做，同時(shí)在頁(yè)面布局上進(jìn)行了簡(jiǎn)化。將頁(yè)面的信息放大處理。通過這樣的方式，從系統(tǒng)的角度實(shí)現(xiàn)了老年人的信息閱讀。

5. 明確的顏色對(duì)比

關(guān)于無(wú)障礙，我們能立即想到的是電視和網(wǎng)頁(yè)的WCAG規(guī)范。其中，我們需要在設(shè)計(jì)顏色對(duì)比度時(shí)進(jìn)行明確的設(shè)定。

該行業(yè)的要求分為AA級(jí)和AAA級(jí)。更明確的顏色和更高的對(duì)比度能夠確保更多色盲人群能夠閱讀。這也能滿足更多用戶的閱讀場(chǎng)景。

WCAG 的 AA級(jí)要求小文本與背景的對(duì)比度至少為4.5：1，大文本與背景的對(duì)比度至少為3：1。

WCAG 的 AAA級(jí)要求小文本與背景的對(duì)比度至少為7：1，大文本與背景的對(duì)比度為4.5：1。

五、結(jié)語(yǔ)

關(guān)于無(wú)障礙設(shè)計(jì)，我相信在行業(yè)不斷發(fā)展的過程中，我們或許會(huì)有更多更好的解決方案。但無(wú)障礙設(shè)計(jì)本身沒有一個(gè)絕對(duì)的價(jià)值。我只是總結(jié)了目前行業(yè)中的這些方案。

至于網(wǎng)頁(yè)端的無(wú)障礙設(shè)計(jì)，或者是低端的五站設(shè)計(jì)，具體如何制作，我感覺還有很長(zhǎng)的路要走。

資料引用：

https://www.bilibili.com/video/BV1954y1d7z9

https://www.bilibili.com/video/BV17s411N7v3/