起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識桌面端的無障礙設計分析
關于無障礙的問題，近年來已經受到越來越多的關注，不止移動端，桌面端也需要進行無障礙設計。那么桌面端應該如何實現無障礙設計呢？本文作者對此進行了分析，一起來看一下吧。
最近，有同學咨詢一個問題：“桌面端的產品需要無障礙設計嗎？”
作為一名設計師，我的求生欲告訴我，肯定需要。但是對于桌面端應該如何實現無障礙設計，我并不確定。
因此，我進行了詳細的研究。隨著調查的深入，越發認識到這個問題并不簡單。我決定分享我所知道的調研結果，也希望能對大家有所幫助。
一、無障礙設計為誰服務？
提到無障礙設計，許多人可能首先想到殘障人士。但殘障人士的范疇實在是過于龐大。作為設計師，如果我們要為他們提供服務，就需要對殘障人士進行相應的劃分。只有了解不同殘障人士所面臨的主要問題，才能更好地進行設計。
目前，行業內將殘障人士分為以下四類：
1）視障人士
主要涉及視力方面問題，包括視力低下、色盲、色弱和失明。
2）聽障人士
雙耳聽力喪失或聽覺障礙，包括全聾、重聽和聽力弱化。很多雙耳全聾的人也無法正常說話，因此通常使用手語進行溝通。除全聾外，還有許多聽力弱化的人，如我的父親左耳聽不到聲音。
3）年長人士
隨著年齡增長，記憶力、視力、聽力和辨別能力會嚴重下降。許多老人連最基本的手機也無法使用，因此需要提供“棒棒機”來服務于他們（四川的俗語，簡稱老年機）為此小米的多親手機就非常流行。
4）運動障礙人士
主要指四肢不靈活或需要使用輔助設施的人，以及在某些環境下無法正常通過手部操作的人。例如B站的心理咨詢師朱銘駿，他是一名高位截肢的消防員，依舊能夠通過嘴巴控制鼠標按鍵上網打英雄聯盟。
上面講到的這幾類人士也是我們目前 互聯網無障礙設計 我所能想到的用戶，并且在不同類型上，無障礙人士的人數分布上也會有所不同，情況如下：
- 視障人士：1700W+
- 聽障人士：7000W+
- 年長人士：20000W+
因此，我們不能忽視這類需求，為此國家也推行了很多政策來優化這種情況。
二、 無障礙的重視程度
關于無障礙問題，近年來已經受到越來越多的關注。在移動行業中，我們可以發現移動端對于無障礙的支持已經相對較為友好，很多軟件都推出了自己的 無障礙模式/老年模式，國家層面也出臺相應法規，強制要求無障礙的信息化產品必須改造。
例如在支付寶中，它的老年模式就是將頁面進行重新排布，通過：字體放大、減少廣告、保留核心功能等做法，將產品的老年模式快速上架。
同時在代碼層面，也要求軟件的代碼更為干凈，以滿足用戶的無障礙需求。
關于這部分內容，大家可以在網上搜索很多相關的咨詢，這里我們就不再進行過多的贅述。
三、無障礙的實施方案
關于無障礙的解決方案，特別是在桌面端產品的無障礙解決方案，目前市面上比較成熟的一共有以下幾種方案：
1. 讀屏丨主要針對視障人士
簡單來說，讀屏就是將手機當中的信息通過聲音的形式快速閱讀。
通常閱讀會包含它的類型以及內容，比如 下圖當中的按鈕，通過讀屏軟件就會閱讀為：“鏈接-網頁，鏈接-資訊，鏈接-視頻?！?/strong>
當然能夠將這些信息讀出來，是一種非常理想的狀態。因為隨著互聯網的不斷發展，界面當中的雜糅信息越來越多，各種彈窗廣告、鏈接跳轉、圖片混亂，導致這些信息真正能夠被系統讀屏閱讀出來其實是非常困難。
所以在實際的使用當中，非常容易會出現下圖這種情況。
在移動端，iOS 對于讀屏的支持非常的好。我們可以打開 手機系統當中的設置 – 輔助功能 – 朗讀內容 進行打開。
而在桌面端對于視障人士的解決方案，主要有以下幾種：
1）系統層級 – 朗讀內容
在 Win 以及 Mac 當中，都會默認提供類似的功能，因此視障人士使用自己的電腦上網，其實是有相應的功能來提供類似能力。
2）應用層級 – 無障礙工具
剛才講的工具，主要都是針對于系統層面。那假設現在給到你一個場景。我是一名視障人士，假設我在別人的電腦當中要進入到一個網頁去做相應的操作，這時候我應該怎么辦？
因此應用層面的工具，可以幫助到上面這個場景的用戶去做使用。那關于應用層面的無障礙工具，主要是在瀏覽器當中去封裝一個工具插件。
我們可以打開 知乎、百度貼吧、等網站，在網站的角落都會提供這樣一個無障礙入口，提示可以進入無障礙模式。
點擊過后，網站頂部會展示一個操作區域，這便是應用層級的無障礙工具。
這個工具在讀屏部分主要包含有以下幾種功能：
①讀屏設置
通過鼠標hover，能夠快速閱讀頁面信息，為視障人士提供便利。我們可以在讀屏設置中設定閱讀速度，快速跳轉到對應模塊，并啟用大字幕。
在鼠標hover時，主要閱讀網頁信息的類型和內容，例如頂部的導航中，選擇頂部信息閱讀則為：鏈接；網頁，鏈接；資訊，鏈接；視頻。
②內容定位
通過 Alt+ 1、2、3、4、5、6，來實現對內容區域的快速定位，因為在整個網頁當中，頁面非常的長，對于本身就是弱勢的殘障人士來說，就是可以將網頁當中的多個內容進行定位，進行實現錨點的快速跳轉。
③大字幕
通過文字快速展示鼠標hover的內容。這樣便于弱視群體能夠識別網站當中的內容。
這里的交互不太容易理解，建議大家去網站上體驗體驗~
2. 放大丨主要針對視弱的用戶
放大則是將頁面顯示的信息放大，進而可以查看更多的內容。我原本以為放大是一個沒什么用的功能，但是直到看到真的有殘障人士通過放大頁面，去寫 vue3 的前端代碼，讓我感到很吃驚。
放大主要針對的是 **視力障礙、視力較弱** 的人，通過頁面放大，他們也能看清顯示器的內容，而這種方式也會分為兩種，系統層級與應用層級。
1）系統層級 – 放大器
讀屏軟件主要是幫助失明的用戶去使用電腦。而放大器更多是為了幫助低視力的人群來去使用。
它的功能非常簡單，就是放大屏幕當中的頁面內容，進而能夠給讓低視力的用戶看信息更為清晰。這個同樣在 Win 和 Mac 上都有類似工具。
在 Mac 當中就是打開 輔助功能-縮放 ，勾選鍵盤鎖縮放就可以縮放整個屏幕，隨后我只需要按住 Command+Alt+8 就可以實現快速的縮放效果。
2）應用層面-瀏覽器放大
在瀏覽器當中，首先我們可以通過 ctrl+ ctrl- 快速縮放整個瀏覽器頁面，只是整體頁面的比例會有調整。
同時也可以使用剛才提到的工具，去縮放瀏覽器，不過它的縮放會有相應限制，一般只能縮放到 130%
3. 變色丨色弱的支持
變色的設計主要在顯示器上去做調整，因為這部分內容很少能夠在個別應用當中體現，所以在顯示器上，我們可以設置 藍、綠、紅 三種顏色的比例進而實現對色弱用戶的支持。
在網頁設計中，也可以采用相同的解決方案來提供配色的選擇。用戶可以點擊配色選項，切換不同的配色風格。將白色背景換成其他顏色，以支持色弱人士。
當然在設計時，我們同樣需要去考慮一些特殊情況，比如 驗證碼的設計，如果是色弱用戶他究竟能不能夠點擊。
4. 語音顯示丨將聲音轉換為文字
看到這個，想到的就只有羅老師的 TNT ，其中炸語音就是將視頻的音頻快速轉化為文字。
最近在很多網站上都出現了類似功能，比如斗魚直播，有字幕功能；Youtube B 站也有字幕的顯示，目的都是語音直接展示成為文字。
這樣就能夠幫助聽障人士，通過字幕來了解視頻當中的文字內容。
5. 無鼠標操作丨滿足特殊的使用場景
我記得在阿里云的一次設計分享會當中，著重強調了無鼠標操作。就是我們只有鍵盤也能夠在阿里云上完成具體的使用操作。針對這種特殊場景，阿里云主要完成的表示鼠標 Hover 時的操作體驗。
其實其目的也非常簡單，因為大多數情況下鼠標媒介對于設計師來說都是非常重要的一種形式，我們通過 無鼠標的方式，就能夠解決用戶在沒有鼠標這種特殊的狀態當中，也能夠保證他的體驗最底線，因此這對于這款產品來說也是一個無障礙設計。
不過在進入到現在的阿里云網站當中，無論是官網還是管理后臺，似乎都不太成立，因為沒辦法使用。
四、無障礙在網頁端的體現
1. 真的需要無障礙么？
關于這個問題，在了解完所有的無障礙內容過后，自己也在思考，真的有必要嗎？我想引用之前生活當中的一件事，希望能夠對大家有所啟發。
在去年的一個深夜當中，當時大概是凌晨的 3 點左右，我家門外傳來了非常猛烈的敲門聲，還在睡夢當中的我迷迷糊糊的走到門前，因為是深夜我下意識提高警惕，不敢開門。透過貓眼一看是一個外賣員，我就在門外喊話說，我沒有點外賣，然后門外的外賣員焦急地指著訂單，然后不停地敲門。這樣的博弈持續了 15 分鐘以后（中間是不停的拉扯，我就不贅述）。
我最終非常小心地打開了門，透過門縫觀察這個外賣員，然后他焦急地指了指手中的訂單，然后給我不停地指電話地址，我突然意識到他是一個聾啞人士，于是我便讓他撥打電話，隨后讓這個顧客下樓取餐（篇幅關系，中間其實還有很長的溝通時間，就省略了）。
當時這個外賣員他是沒有任何辦法，因為顧客的地址錯誤導致了他在這里浪費了非常多的時間。隨后我又會想，為什么這位外賣員會選擇深夜送餐，可能就是因為深夜人少、單價高，他能夠跑更少的訂單掙更多的錢……
而對于無障礙的設計也是一樣，因為使用的人群不是我們這群正常人，我們根本沒有辦法去評判這個設計的好壞，而在很多產品的基礎設計當中，我們要去考慮殘障人士的使用問題。
（最近也發現餓了么上線了溝通障礙騎士）
2. 軟件設計的細節
在我們日常的設計當中，也要注意無障礙的支持場景，這里給大家舉一些例子。
比如在企業微信的注冊頁面時，微信團隊考慮到會有年長的用戶群體，因此我們再輸入號碼是企業微信的數字，會默認放大來提示用戶，并且會根據不同的分段來讓用戶對號碼進行校驗。
而這其實就是針對，我們在錄入場景是需要去思考的內容，特別是在很多，有年長用戶的，后面端產品當中，我們需要通過這種方案來盡可能多的去兼容
再比如，在使用百度搜索相關信息之后，我們如何快速返回搜索框并調整我們的搜索關鍵詞呢？我以前的方法是將鼠標移動到搜索框中，現在我們可以通過按住斜杠鍵（/）快速聚焦光標，從而實現無鼠標的全程操作。
（之前百度還會有提示，現在沒有了，遂不能截圖）
3. 代碼庫鑲嵌
剛才我們看到各大網站里面對于無障礙模式的支持，其中包括貼吧，知乎。微博等等。那這些網站他們的這個技術是從何而來？如果我想要做應該怎么辦？
其實這都是源自一個代碼庫：Tagalta。
我們只需要引用這個代碼，就能夠實現剛才的所有功能。但是這個代碼庫它本身是需要付費的。為此我在網上也尋找了一些平替的方案。
在github上面有一個開源的方案，如果你對這部分要求不高我們可以直接引用。
[http://www.tagalta.com]
4. 自制老年模式
最近在瀏覽知乎的時候，發現他們網站上除了無障礙模式之外，還會有一個全新的功能，老年模式。
點擊了過后，發現其實就是將上訴提到的功能進行重做，同時在頁面布局上進行了簡化。將頁面的信息放大處理。通過這樣的方式，從系統的角度實現了老年人的信息閱讀。
5. 明確的顏色對比
關于無障礙，我們能立即想到的是電視和網頁的WCAG規范。其中，我們需要在設計顏色對比度時進行明確的設定。
該行業的要求分為AA級和AAA級。更明確的顏色和更高的對比度能夠確保更多色盲人群能夠閱讀。這也能滿足更多用戶的閱讀場景。
WCAG 的 AA級要求小文本與背景的對比度至少為4.5：1，大文本與背景的對比度至少為3：1。
WCAG 的 AAA級要求小文本與背景的對比度至少為7：1，大文本與背景的對比度為4.5：1。
五、結語
關于無障礙設計，我相信在行業不斷發展的過程中，我們或許會有更多更好的解決方案。但無障礙設計本身沒有一個絕對的價值。我只是總結了目前行業中的這些方案。
至于網頁端的無障礙設計，或者是低端的五站設計，具體如何制作，我感覺還有很長的路要走。
資料引用：
https://www.bilibili.com/video/BV1954y1d7z9
https://www.bilibili.com/video/BV17s411N7v3/
專欄作家
CE青年，微信公眾號：CE青年，人人都是產品經理專欄作家。專注B端設計領域，一個2B行業的2B設計師。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
就像作者說的那樣，關于無障礙設計，我們還有很長一段路需要走。