了解Web與移動應用程序的無障礙指引

美國疾病控制與預防中心的調查顯示，美國人口中有超過6000萬的殘疾人——也就是說，每4人中就有超過1人患有殘疾。在這個數字中，患有行動障礙的人數占比13.7%，患有認知障礙的人數占比10.8%，患有聽力障礙的人數占比5.9%，患有視覺障礙的人數占比4.6%。殘疾類型如此之多，對一個人瀏覽網站時可能遇到的困難進行說明就顯得至關重要，因此要設計對比度調整、說明文字或基于路徑的輸入等無障礙指引，幫助這些患有殘疾的用戶順利訪問和使用網站內容。

在本文中，我們會討論無障礙使用環境的整體概念及其目的，以及可保證web和移動解決方案無障礙使用的標準化指引。此外，我們也會列出幾款工具幫助檢查是否滿足無障礙使用要求。

什么是無障礙環境，以及為什么它很重要？

無障礙環境指合理設計web內容，讓所有用戶（無論是身體條件受限、環境受限還是社會經濟條件受限的用戶）都能夠順利訪問和使用軟件。來看一下下面這個例子。

圖1：WCAG對比度要求的比較

在不做無障礙環境調整的情況下，盲人、聾人或患有認知障礙的用戶將無法訪問和使用web內容，圖1左側的文字就是一個例子。雖然左右兩側的文字在沒有視覺障礙的用戶眼中只有細微差別，但只有右側的文字滿足WCAG對比度要求，因此更易于被患有視覺障礙的用戶辨認。

無障礙環境可以擴大用戶規模，讓web內容的使用對于殘障人士而言不再是無法完成的任務。無障礙內容可以幫助這類用戶降低使用難度，消除障礙。

什么是WCAG？

作為web標準的牽頭組織，萬維網聯盟（W3C）制定了包括Web內容無障礙指南（WCAG）在內的一系列指南，讓全體用戶都能在無障礙的環境下訪問web內容。雖然無法照顧到每一個個體的所有情況，但無障礙環境這個理念的目標是盡可能讓更多的用戶能夠順利實現與web內容的互動。截至本稿發布日期，最新版的WCAG標準是2.1版。雖然作為繼任標準的WCAG 2.2版也已經公布，但該版本目前還處于起草階段。因此，除非另有明確說明，本文中提及的WCAG均僅指WCAG 2.1版標準。

WCAG由四大基本原則組成，每一條原則又包含若干條指南，總計為13條。這13條指南又進一步被細分為78條可以檢驗的合格標準，部分合格標準甚至還包含多種情況。最后，每一種合格標準均由低到高分為A~AAA三個等級，用來表示與標準之間的貼合程度。因此，若以滿足最低要求為目標，只需關注A級的合格標準即可。由于這種分級制度看起來過于繁瑣，因此W3C貼心地提供了帶有篩選功能的快速索引頁。

一想到無障礙環境，不少人（包括開發人員）立刻想到的是鍵盤的無障礙操作和導航。鍵盤的無障礙操作固然重要，但在全部13條指南中只有一條有特別提到過，并且只有四項合格標準有所涉及。因此，WCAG指的必然是更偏向廣義層面的無障礙環境。上述四大原則（可感知性、可操作性、可理解性、健壯性）可解決各式各樣的問題；其中部分列舉如下。

原則1——可感知性：信息和用戶界面組件必須以可感知的方式呈現給用戶。

合格標準示例：1.4.1 顏色的使用——顏色不是信息傳遞、動作指示、響應提示和分別視覺元素的唯一手段。

圖2：顏色不應該作為信息傳遞的唯一手段

圖2通過顏色、符號、文本的組合來指示某一動作是否成功或某個項目的狀態。

原則2——可操作性：用戶界面組件和導航必須是可操作的。

合格標準示例：2.1.4 字符快捷鍵——若在內容中僅使用字母（包括大寫和小寫字母）、標點符號、數字或符號字符來實現鍵盤快捷鍵，則必須至少符合以下條件之一：

• 關閉：配備了可關閉快捷功能的機制
• 重新映射：配備了重新映射快捷鍵的機制，能夠將一個或多個非打印按鍵包含進來（例如：Ctrl、Alt等）
• 僅在獲取焦點后激活：用戶界面組件的快捷鍵僅在該組件獲得焦點后激活。

如圖3所示，當僅包含字母的快捷鍵只在下拉菜單獲得焦點才激活時，即可通過這些快捷鍵在下拉菜單中選擇。

合格標準示例：2.4.6 標題與標簽 – 在標題與標簽中說明控制用途。

如圖4所示，控制標簽描述了各個單選按鈕的用途，對輸入域及其在上下文中的用途進行了清晰、簡潔的說明。

原則3 – 可理解性：信息和用戶界面操作必須是可理解的。

合格標準示例：3.2.3 前后一致的導航 – 在同組下多個Web頁面中重復出現的導航機制，每一次出現時的相對位置均保持不變，除非用戶主動更改。

圖5：各個頁面的導航應保持一致

圖5展示的是作為標題區域特性之一的全局病人搜索框。這個搜索框統一出現在各個頁面的左上角，因此可通過應用程序的任意位置訪問。

合格標準示例：3.2.4 前后一致的表示 – 同一組Web頁面中功能相同的組件要使用前后一致的方式進行標識。

在圖6中，我們可以看到三種獨立的控制方式，它們的功能相同，但是卻采用了不一致的標識。

原則4 – 健壯性：內容必須擁有足夠的健壯性，能夠被各式各樣的客戶端解讀，包括輔助技術。

合格標準示例：4.1.2 名稱、作用與值 – 對于所有用戶接口組件（包括但不限于：表單元素、鏈接、腳本生成的組件），其名稱和作用均可通過編程的方式確定；狀態、屬性、值等可由用戶設置的項目可通過編程的方式設置；這些項目變更時會向客戶端發送通知，包括輔助技術。

在圖7中，搜索按鈕的名稱和作用已經指定，這樣就能夠通過編程的方式確定。

合格標準示例4.1.3：狀態消息 – 在使用標記語言實現的內容中，狀態消息可通過作用或屬性以編程的方式確定，這樣就可以在不獲取焦點的情況下以輔助技術將狀態消息呈現給用戶。

在圖8中，搜索后的結果消息屬于狀態消息，因此需要合適的作用或屬性。

符合性

每一個符合合格標準的頁面都有著大量的詳細說明——用途說明、使用場景示例、滿足要求所需的技術以及常見問題。提供這些信息的目的無一不是為了讓開發人員能夠實現符合性。

可是符合性在這里是什么意思？難道僅僅是指滿足合格標準的要求？WCAG符合性指：

• 滿足給定等級（A、AA、AAA）下的所有合格標準
• 頁面具有完全的符合性，而非部分符合
• 所有頁面都有完整的流程
• 合格標準的滿足僅通過支持無障礙環境的技術使用方式實現
• 以不支持無障礙環境或不具有符合性的方式使用的技術無法為頁面實現無障礙環境。

法定義務

在美國，《美國殘疾人法案》第三章嚴禁歧視殘疾人；不過這項規定對web內容有多大的影響并不明確。對于《美國殘疾人法案》是否要求web內容運營商在其網站和應用程序中為殘疾人創造無障礙環境這一點，不同的法院之間還存在分歧，不過從最近的投訴、訴訟、裁定、看法走向可以看出， WCAG 2.1 AA級可充分滿足《美國殘疾人法案》的要求。

《1973康復法案》第508節關注如何消除信息技術中的障礙，讓聯邦機構的殘疾人能夠順利使用。若個人網站與某個聯邦機構簽署了合約或接受了聯邦的資助，則也應當遵守這些要求。2017年，相關部門對第508節的內容進行了更新，采用WCAG 2.0合格標準作為其標準。

如需了解美國有關無障礙環境的法律、政策以及相關的WCAG指南（如有），可訪問W3的網站查閱。

DevTools

了解WCAG的指南和要求是好事，但如何確認您的web內容或您使用的網站是無障礙的？所幸的是，Chrome的DevTools（我們在之前的文章中討論過）能夠提供多種途徑確認一個網頁是否滿足特定的無障礙環境要求。首先是元素檢查工具。利用這款工具在某個頁面元素上懸停，即可帶出該元素無障礙指標的信息提示框。在這個提示框內，您可以看到對比度、名稱、作用和能否通過鍵盤獲得焦點等信息。雖然無法覆蓋給定符合性等級下的所有合格標準，但是這些項目可以幫助您快速確認部分重要需求和常見需求。

或者，打開“元素”選項卡并選擇某一行即可將焦點轉移到該元素上。選擇“無障礙環境”選項卡即可打開與無障礙環境的相關內容。在“計算屬性”中，您可以找到名稱、作用、是否可通過鍵盤獲得焦點等前面討論過的項目。雖然在本文中屬于超綱內容，但需要注意的是，ARIA（無障礙富互聯網應用）屬性（見圖11）對于輔助技術而言是很重要的，在多項合格標準中都有涉及。

查看對比度時，從“無障礙環境”選項卡切換到“風格”選項卡。點擊色塊打開拾色器。然后，在設色器中展開對比度域，即可看到滿足要求的顏色。展開色域時，拾色器上會出現兩條線，分別表示AA級和AAA級的符合性。在線條同一側的所有顏色都擁有相同的結果，即：若當前的對比度無法滿足要求，那么在線條的同一側選取任意一種顏色同樣也無法滿足要求。

Lighthouse

Chrome瀏覽器在無障礙環境符合性的檢測方面更加深入，并推出了Lighthouse工具。在DevTools中選擇Lighthouse標簽頁，即可打開可運行報告的選項。

圖13：選擇報告并使用DevTool的Lighthouse生成

在“分類”標題下有一個“無障礙環境”的復選框，選中后即可確保審核工具在當前頁面查找無障礙環境的相關問題。在“設備”標題下，您可以在臺式電腦和手機之間來回切換，確保您審核的頁面在兩種環境下都滿足要求。準備就緒后，單擊“生成報告”按鈕，Lighthouse就會運行一系列測試，對頁面的易用性進行評估。

評估完成后會生成一份“無障礙環境”報告，其中包括整體的“無障礙環境評分”以及可以展開并繼續檢查具體元素的標題。將鼠標移到某個元素上方，即可在頁面中高亮顯示該元素，而選中報告中的元素即可直接跳轉至對應的代碼。

圖14：Lighthouse中的無障礙環境報告

雖然審核報告在檢查是否符合無障礙環境指南時非常實用，但是不應將其用于取代人工檢查。有些東西是Lighthouse鞭長莫及的，選項卡的邏輯順序就是一個例子，因此人工檢查是非常必要且推薦的。

結論

美國有超過6000萬的殘障人士，web的無障礙環境不應該僅僅只是馬后炮。采取一些辦法幫助各類殘障人士訪問和使用您的web內容，不僅可以提升您的用戶規模和客戶群，還可以幫助您避免吃官司。雖然實現并遵守本文提到的WCAG指南是一項沉重的負擔，但最終您會發現，無障礙環境是物有所值的。