前言

“信息無障礙”譯自“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ù)。

 

殘障人士分析

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

• 視障人士：1.低視力，由于各種原因?qū)е码p眼視力障礙或視野縮小，難能做到一般人所能從事的工作、學習或活動；2.色盲，分為全色盲和部分色盲（紅色盲、綠色盲、藍黃色盲等），不能分辨各種顏色或某種顏色；3.色弱，包括全色弱和部分色弱（紅色弱、綠色弱、藍黃色弱等），能看到顏色，但辨認顏色的能力遲緩或很差；4.失明人士，眼睛患有疾病或受到意外傷害而導致雙目失明。
• 聽障人士：雙耳聽力喪失或聽覺障礙，聽不到或聽不清周圍環(huán)境的聲音，包括全聾、重聽、聽力弱化等人士。
• 運動障礙人士：這里主要指手部不靈活或需要使用輔助設(shè)施的人士，也包括在某些環(huán)境下，不能正常通過手部操作的人士。
• 讀寫障礙人士：一種最常見的特殊學習困難，閱讀方面會跳字漏行、增字、替換字、倒反念，或無法理解閱讀內(nèi)容混淆相似字。
• 老年人：會出現(xiàn)身體機能下降、記憶力減退、視力下降等特征。

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

 

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

使用良好的顏色對比度

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

根據(jù) WCAG 2.0 的標準：

• 對比度（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)容中，未激活的界面組件、純粹的裝飾、文本作為標志或品牌名稱的一部分，這些情況都沒有最低對比度限制。

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

Contrast Grid 可以測試多個顏色組合是否符合 WCAG 2.0 的對比度標準

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

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

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

 

2. 為色盲色弱人士設(shè)計

避免僅使用顏色傳遞信息

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

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

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

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

 

3. 為失明人士設(shè)計

支持鍵盤導航

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

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

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

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

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

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

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

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

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

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

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

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

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

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

提供多種驗證碼方式

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

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

快速訪問內(nèi)容

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

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

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

 

4. 為聽力障礙人士設(shè)計

為視頻添加字幕

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

 

5. 為運動障礙人士設(shè)計

支持鍵盤導航

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

交互元素易于點擊

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

 

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

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

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

保持一致性的對齊方式

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

 

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

使用較大的字號

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

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

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

減少手動輸入

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

瀏覽路徑簡單明確

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

 

小結(jié)

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

為視障人士設(shè)計

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

為聽障人士設(shè)計

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

為運動障礙人士設(shè)計

• 支持鍵盤導航
• 交互元素易于點擊

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

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

為老年人設(shè)計

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

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

 

參考文獻

《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》

 

感謝你的閱讀，本文出自 Tencent CDC，轉(zhuǎn)載時請注明出處，謝謝合作。
格式為：Tencent CDC（http://cdc.tencent.com/2018/08/13/【to-g設(shè)計賦能】政務(wù)網(wǎng)站信息無障礙設(shè)計-研究篇/）