「信息無障礙」譯自「Accessibility」，指的是任何人在任何情況下都能平等、方便、無障礙地獲取信息并利用信息。以互聯(lián)網(wǎng)環(huán)境為例，互聯(lián)網(wǎng)產(chǎn)品可以被老年人、視障者、聽障者、讀寫障礙人士等用戶順利使用。

近年來，隨著互聯(lián)網(wǎng)的快速發(fā)展，很多人已經(jīng)開始廣泛使用電子政務(wù)，政府也越來越多地以在線方式向大家提供信息和服務(wù)。據(jù)國家統(tǒng)計局和殘疾人聯(lián)合會數(shù)據(jù)顯示，我國65歲及以上的老年人1.4億，殘疾人士有8502萬，分別人數(shù)為：視力殘疾1263萬人；聽力殘疾2054萬人；言語殘疾130萬人；肢體殘疾2472萬人；智力殘疾568萬人；精神殘疾629萬人；多重殘疾1386萬人。目前我國31個省、276個地市、1197個縣級的殘聯(lián)都開通了網(wǎng)站，積極推動殘疾人證智能化工作，發(fā)展「互聯(lián)網(wǎng)+殘疾人服務(wù)」。為了讓殘障人士能無障礙地使用電子政務(wù)，給他們提供更便捷、高效的服務(wù)，政務(wù)網(wǎng)站的無障礙建設(shè)尤其重要。網(wǎng)站構(gòu)建的所有內(nèi)容都應(yīng)該盡可能具有包容性，易讀性和可讀性，為每一個人設(shè)計，為每一個人服務(wù)。

一、殘障人士分析

信息無障礙涉及廣泛的殘疾類別，包括視覺、聽覺、身體、語言、認(rèn)知、語言、學(xué)習(xí)以及神經(jīng)殘疾。我們可能無法滿足所有類型、程度和多重殘疾人群的需要，但可以對占比基數(shù)較多的特殊人群開始分析研究。

1. 視障人士

• 低視力，由于各種原因?qū)е码p眼視力障礙或視野縮小，難做到一般人所能從事的工作、學(xué)習(xí)或活動；
• 色盲，分為全色盲和部分色盲（紅色盲、綠色盲、藍(lán)黃色盲等），不能分辨各種顏色或某種顏色；
• 色弱，包括全色弱和部分色弱（紅色弱、綠色弱、藍(lán)黃色弱等），能看到顏色，但辨認(rèn)顏色的能力遲緩或很差；
• 失明人士，眼睛患有疾病或受到意外傷害而導(dǎo)致雙目失明。

2. 聽障人士

雙耳聽力喪失或聽覺障礙，聽不到或聽不清周圍環(huán)境的聲音，包括全聾、重聽、聽力弱化等人士。

3. 運(yùn)動障礙人士

這里主要指手部不靈活或需要使用輔助設(shè)施的人士，也包括在某些環(huán)境下，不能正常通過手部操作的人士。

4. 讀寫障礙人士

一種最常見的特殊學(xué)習(xí)困難，閱讀方面會跳字漏行、增字、替換字、倒反念，或無法理解閱讀內(nèi)容混淆相似字。

5. 老年人

會出現(xiàn)身體機(jī)能下降、記憶力減退、視力下降等特征。

一個網(wǎng)站如果全站做到信息無障礙需要花費(fèi)很多時間，進(jìn)行很多研究和用戶測試才可以完成，但我們可以分階段逐步去推進(jìn)改造，例如先從整個網(wǎng)站的顏色對比度開始入手，解決低視力人士的問題。

二、為低視力人士設(shè)計

使用良好的顏色對比度

確保顏色對比度符合 WCAG 2.0（內(nèi)容無障礙指南）標(biāo)準(zhǔn)，是信息無障礙中非常重要的一步。如果我們在設(shè)計當(dāng)中做到這一點(diǎn)，也可以保障低視力人士能更好地獲取信息。

根據(jù) WCAG 2.0 的標(biāo)準(zhǔn)：

• 對比度（AA 級）: 文本的視覺呈現(xiàn)以及文本圖像至少要有4.5:1的對比度；
• 大文本: 大號文本（字重為 Bold 時大于18px，字重為 Regular 時大于24px ）以及大文本圖像至少有3:1的對比度；
• 對比度（AAA 級）: 文本視覺呈現(xiàn)以及文本圖像至少有7:1的對比度；
• 大文本: 大號文本（字重為 Bold 時大于18px，字重為 Regular 時大于24px ）以及大文本圖像至少有4.5:1的對比度。

在附屬內(nèi)容中，未激活的界面組件、純粹的裝飾、文本作為標(biāo)志或品牌名稱的一部分，這些情況都沒有最低對比度限制。

WebAIM 可以幫助我們測試對比度，并且可以在線調(diào)整符合標(biāo)準(zhǔn)的顏色

Contrast Grid 可以測試多個顏色組合是否符合 WCAG 2.0 的對比度標(biāo)準(zhǔn)

使用 Contrast Grid 測試了兩個國內(nèi)省級政務(wù)服務(wù)網(wǎng)站的顏色，發(fā)現(xiàn)基本上只有主要文字和次要文字的顏色能達(dá)到標(biāo)準(zhǔn)，用于網(wǎng)站上大面積的品牌藍(lán)色（鏈接色）在大于18px字號下才符合對比度要求。

英國政府網(wǎng)是目前全球數(shù)字政府中做的最好的政務(wù)網(wǎng)站，在英國，政務(wù)服務(wù)是所有服務(wù)里面使用時間最久、提供量最大的服務(wù)。他們網(wǎng)站設(shè)計也很注重信息無障礙，在這方面付出了很大的努力。

檢測后發(fā)現(xiàn)英國政府網(wǎng)使用的顏色都有足夠高的對比度，滿足了 WCAG 2.0 的標(biāo)準(zhǔn)，而且整體顏色都使用了偏低飽和度和明度的顏色。加強(qiáng)顏色的對比度，不只是為了讓低視力人士能更好地使用我們的產(chǎn)品，同時也可以讓使用較差顯示設(shè)備的用戶、老年人有更好的產(chǎn)品體驗。

三、為色盲色弱人士設(shè)計

避免僅使用顏色傳遞信息

顏色在設(shè)計中起著重要作用，能喚起情感，感受和想法，并且可以幫助增強(qiáng)品牌的信息和感知。然而，當(dāng)用戶無法看到它們或以不同方式感知它們時，顏色的作用就會消失。對于無法辨別顏色的色盲色弱人士，如果只用顏色作為傳達(dá)信息，提示信息重要性或區(qū)分視覺元素的唯一途徑，他們是很難感知的。

Stark（Sketch插件）可以模擬不同類型的色盲色弱人士所看到的效果，來幫助我們設(shè)計。

某個政務(wù)網(wǎng)站上的注冊表單，在沒有填寫任何信息的情況下點(diǎn)擊注冊按鈕，必填項出現(xiàn)的錯誤提示是在下方用了紅色的文字，這種方式對于普通用戶來說是可以感知的。右側(cè)圖則是模擬紅綠色盲人士看到的效果，這種情況下，錯誤提示的引導(dǎo)性就會降低很多。

英國政府網(wǎng)的錯誤提示對于色盲色弱人士就友好很多，除了紅色的提示文字外，輸入框的邊框還會加粗處理，并且加上豎線提示對應(yīng)沒填寫的表單項，提醒用戶注意。除此之外，其實還有很多視覺處理的方法來達(dá)到傳遞信息的目的，例如在輸入框內(nèi)或者提示文字前加上感嘆號的圖標(biāo)，這種方式對于普通用戶來說，也會有更明確的提示。

四、為失明人士設(shè)計

1. 支持鍵盤導(dǎo)航

網(wǎng)站支持鍵盤導(dǎo)航是無障礙很最關(guān)鍵的一個方面，無障礙指南中提到要使所有功能都能通過鍵盤來操作，對于依賴于屏幕閱讀器的失明人士和沒有精確肌肉控制的人士，都需要使用鍵盤來導(dǎo)航內(nèi)容。

當(dāng)你瀏覽網(wǎng)站時，整個頁面導(dǎo)航順序應(yīng)該是有邏輯，可預(yù)測和直觀的。選項的順序應(yīng)該遵循規(guī)則：從左到右，從上到下，由頂部導(dǎo)航到內(nèi)容區(qū)，最后是頁腳。

我們可以嘗試只用鍵盤操作來測試網(wǎng)站，使用 Tab 鍵移動焦點(diǎn)，用 Enter 鍵選擇元素。測試所有的交互元素是否可預(yù)測且有序。如果可以在沒有鼠標(biāo)的情況下瀏覽整個網(wǎng)站的所有內(nèi)容，證明這個網(wǎng)站已經(jīng)滿足了支持鍵盤導(dǎo)航的基本要求。

下圖是國內(nèi)某個政務(wù)網(wǎng)站首頁的導(dǎo)航區(qū)，標(biāo)注的數(shù)字是獲取焦點(diǎn)的順序，在用鍵盤導(dǎo)航的過程中，整個頁面導(dǎo)航順序都比較混亂，某些元素也無法通過鍵盤來獲取。

相反，英國政府網(wǎng)和澳大利亞政府網(wǎng)首頁的導(dǎo)航邏輯就會比較清晰，整個網(wǎng)站遵循從左到右，從上到下的原則，每個交互元素都可以通過鍵盤來獲取，讓用戶感知到整個網(wǎng)站的布局，確定每個內(nèi)容的位置。

用戶通過 Tab 鍵導(dǎo)航網(wǎng)站交互元素時，焦點(diǎn)就是提供了當(dāng)前所選組件的可視化指示，焦點(diǎn)可幫助用戶了解界面上哪些元素有鍵盤焦點(diǎn)，并幫助他們了解導(dǎo)航網(wǎng)站時的位置。很多網(wǎng)站都是用了瀏覽器默認(rèn)的焦點(diǎn)樣式，但我們也可以根據(jù)內(nèi)容設(shè)計出符合網(wǎng)站風(fēng)格，與品牌相呼應(yīng)的焦點(diǎn)樣式。

英國政府網(wǎng)就是重新設(shè)計了焦點(diǎn)樣式，使用黃色來突出焦點(diǎn)，讓用戶更明確當(dāng)前焦點(diǎn)所在位置。根據(jù)不同的元素，樣式也會有所變化。

蘋果官網(wǎng)的焦點(diǎn)樣式也進(jìn)行了重新設(shè)計，在圓角輸入框上焦點(diǎn)也做了相應(yīng)的調(diào)整，使焦點(diǎn)和頁面元素更為融合。

2. 為非文本內(nèi)容添加替代文本

視障人士經(jīng)常會利用屏幕閱讀器來「聆聽」我們的網(wǎng)站，網(wǎng)站上的文字、圖片、組件等信息都是通過屏幕閱讀器說出來。這時候如何為這些非文本內(nèi)容添加描述準(zhǔn)確的輔助替代文本就非常重要。

以下圖為例，左圖搜索框按鈕的替代文本為「按鈕」，這種描述就會很抽象，增加了視障人士的理解門檻，容易讓他們產(chǎn)生一個疑問：這是一個什么作用的按鈕？相對來說，右圖的處理則清晰很多，按鈕的替代文本很明確地告訴用戶這是一個搜索按鈕。

圖片很多時候在設(shè)計中用于傳達(dá)特定的感覺和渲染氛圍，如果需要通過用替代文本來傳達(dá)圖片信息的時候，我們可以嘗試用簡練的語言去描述圖片內(nèi)容，讓視障人士能快速獲取信息，在腦海里形成畫面，而不只是告訴他們這是一張圖片。

如果我們沒有對圖片添加替代文本，屏幕閱讀器就會直接把一串字符的文件名字讀出來。嘗試打開屏幕閱讀器，閉上眼睛去「聽」這種圖片，是一種非常難受的體驗。

除此之外，英國政府網(wǎng)還有很多細(xì)節(jié)的處理值得學(xué)習(xí)。他們添加的標(biāo)簽描述都很清晰，焦點(diǎn)切換到列表的第一項時會告訴用戶這個列表總共有多少個項目，下拉菜單目前是一個怎樣的狀態(tài)，讓視障人士對于整個網(wǎng)站有一個布局感受，同時也大大提高了他們的安全感。

3. 提供多種驗證碼方式

賬號注冊是用戶開始業(yè)務(wù)辦理的第一步，可是往往這一步就給了視障人士一個很大阻力。目前很多政務(wù)服務(wù)網(wǎng)注冊流程的驗證方式都只提供圖形驗證碼，但屏幕閱讀器是無法識別驗證碼中的文本信息。如果注冊流程都有障礙的話，其他業(yè)務(wù)辦理即使有做無障礙改造，對視障人士來說都是沒有意義的。我們除了圖形驗證碼之外，還應(yīng)該提供多種驗證方式讓用戶選擇，如手機(jī)驗證碼、語音驗證碼等。

蘋果網(wǎng)站的注冊流程中，驗證方式除了提供圖形驗證碼之外，還會提供語音驗證碼。

4. 快速訪問內(nèi)容

對于只使用鍵盤導(dǎo)航的用戶來說，在熟悉網(wǎng)站后，他們是希望直接訪問頁面內(nèi)容的。但是很多網(wǎng)站的頂部導(dǎo)航存在多個菜單，在用戶獲取頁面內(nèi)容之前，他們需要逐個切換鏈接才可以去到頁面內(nèi)容部分，打開一個新的頁面，又是重復(fù)這樣的步驟。

面對這樣的問題，我們可以提供更友好的解決方案。當(dāng)用戶開始使用鍵盤導(dǎo)航頁面時，提供一個「跳至內(nèi)容」的鏈接，直接跳過每個頁面重復(fù)的內(nèi)容，提高視障人士或者鍵盤使用者的操作效率。

在使用鍵盤導(dǎo)航時，F(xiàn)acebook 還提供了頁面內(nèi)模塊和其他頁面的導(dǎo)航菜單，讓用戶可以更快速地跳到指定的內(nèi)容上，使用起來更高效。

五、為聽力障礙人士設(shè)計

為視頻添加字幕

網(wǎng)站上的視頻都應(yīng)盡可能配上字幕，讓聽障人士可以結(jié)合視頻畫面理解內(nèi)容。在政務(wù)網(wǎng)站上，為辦事指南的視頻教程里添加字幕，也有助于聽障人士更好地獲取信息，更容易完成辦事流程。除此之外，我們也可以提供詳細(xì)的圖文指南讓用戶選擇。

六、為運(yùn)動障礙人士設(shè)計

1. 支持鍵盤導(dǎo)航

部分運(yùn)動障礙人士如果無法控制鼠標(biāo)，其實也是需要使用鍵盤來導(dǎo)航網(wǎng)站的，網(wǎng)站支持鍵盤導(dǎo)航不只是為了盲人用戶而設(shè)定，對于其他的殘障人士也是非常重要。

2. 交互元素易于點(diǎn)擊

在設(shè)計控件時，也應(yīng)該更加關(guān)注運(yùn)動障礙人士和老年用戶的使用體驗，適當(dāng)增加可點(diǎn)擊的目標(biāo)區(qū)域，讓按鈕、菜單選項和鏈接足夠大，以便他們更容易操作。

七、為讀寫障礙人士設(shè)計

1. 圖形、圖片和文字結(jié)合的排版

由于讀寫障礙人士對文字閱讀有一定的難度，閱讀方面會出現(xiàn)跳字漏行、增字等情況。網(wǎng)站上應(yīng)盡量減少同一位置上出現(xiàn)大篇幅的文字，WCAG2.0 中也提到的單行寬度不超過40個中文字符或符號，保持簡練的文字表達(dá)和清晰的內(nèi)容，通過使用標(biāo)題、圖片和列表來分解內(nèi)容，緩解他們的閱讀壓力，以便為用戶提供心理休息和提高內(nèi)容的可讀性。

2. 保持一致性的對齊方式

整個網(wǎng)站都盡可能保持統(tǒng)一的對齊方式，英國政務(wù)網(wǎng)的每個模塊的內(nèi)容都采用左對齊的方式，遵循用戶從左到右瀏覽習(xí)慣，讓其更自然和高效。本來讀寫障礙人士對于閱讀就有障礙，如果出現(xiàn)多種對齊方式，則會讓他們更加眼花繚亂。

八、為老年人設(shè)計

1. 使用較大的字號

為了確保老年人用戶能清晰瀏覽網(wǎng)站，而且考慮到并不是每個用戶都使用高分辨率的顯示設(shè)備，大字號的界面對于他們來說是很重要的。同時，我們還需要避免出現(xiàn)擁擠的大段文字，盡量把信息進(jìn)行合理的分解，增加留白空間，通過排版組合讓用戶更清晰明確地獲取信息。

英國政務(wù)網(wǎng)的文字體系里，整理都選用了較大的字號，最小的正文也使用到19px字號。

考慮到用戶對于字號大小顯示的不同需求，香港政府網(wǎng)的頂部導(dǎo)航還提供了字形大小的入口，指引用戶在不同瀏覽器下如何設(shè)置字號大小，讓他們可以設(shè)置最適合自己閱讀的顯示效果。

2. 減少手動輸入

很多老年人達(dá)到了一定年齡，身體機(jī)能和記憶力會開始逐漸衰退，這使得他們操作網(wǎng)站界面變得更加困難，拼寫輸入就是其中一個很大障礙，我們應(yīng)該盡量減少讓用戶手動拼寫輸入。在業(yè)務(wù)辦理流程中，對于填寫個人信息部分，可以優(yōu)先從賬號信息中拉取相關(guān)內(nèi)容，其他信息補(bǔ)充部分，能提供選擇項的內(nèi)容都盡可能使用選擇控件。

3. 瀏覽路徑簡單明確

為了老年人能更好地瀏覽網(wǎng)站內(nèi)容，應(yīng)該保持頁面清晰的布局和模塊劃分，為他們提供一個簡單明確的視覺動線，讓整個網(wǎng)站的內(nèi)容都是直觀和易于理解。

總結(jié)

根據(jù)不同類型的用戶群體，我們應(yīng)該思考如何為他們設(shè)計和提供更高效的服務(wù)，讓所有人都能平等、方便、無障礙地獲取信息。

1. 為視障人士設(shè)計

• 使用良好的顏色對比度
• 使用適合閱讀的字號
• 使用顏色、圖形和文字結(jié)合的方式傳達(dá)信息
• 支持鍵盤導(dǎo)航
• 為非文本內(nèi)容添加替代文本

2. 為聽障人士設(shè)計

• 為視頻添加字幕
• 用標(biāo)題、圖片、列表等方式分解內(nèi)容
• 保持內(nèi)容清晰簡潔
• 有邏輯的版面布局

3. 為運(yùn)動障礙人士設(shè)計

• 支持鍵盤導(dǎo)航
• 交互元素易于點(diǎn)擊

4. 為讀寫障礙人士設(shè)計

• 使用圖形、圖片和文字結(jié)合的排版
• 保持一致性的對齊方式
• 保持內(nèi)容清晰簡潔

5. 為老年人設(shè)計

• 使用較大的字號
• 瀏覽路徑簡單明確
• 減少手動輸入
• 交互元素易于點(diǎn)擊

無障礙設(shè)計并不意味著會讓網(wǎng)站變得不好看，相反，它會在我們思考的過程中融入一些條件限制。在這些條件限制中去探索如何讓我們的設(shè)計能適用于所有用戶，為每一個人設(shè)計，為每一個人提供更好的政務(wù)服務(wù)。

參考文獻(xiàn)

• 《Designing accessible products》 Adhithya
• 《Accessible Interface Design》 Nick Babich
• 《Designing for accessibility is not that hard》 Smashing Magazine
• 《Designing For Accessibility And Inclusion》 Pablo Stanley
• 《How to make accessibility easier for service teams》 Angela Collins Rees
• 《7 Things Every Designer Needs to Know about Accessibility》 Jesse Hausler
• 《Web 內(nèi)容無障礙指南 (WCAG) 2.0》

歡迎關(guān)注作者「騰訊CDC體驗設(shè)計」的微信公眾號：

「無障礙設(shè)計好文」

• 《可能是最全面的「無障礙設(shè)計」學(xué)習(xí)指南》
• 《超實用！通用設(shè)計法則解析之「無障礙使用」》
• 《Airbnb 設(shè)計師：我們?nèi)绾螢闅堈先耸孔鲇脩趔w驗設(shè)計？》