了解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指南是一項沉重的負擔，但最終您會發現，無障礙環境是物有所值的。