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

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

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

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

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

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

無(wu)障礙(ai)環境可以(yi)擴大用(yong)戶規模，讓(rang)web內容(rong)的使(shi)用(yong)對于殘(can)障人士而言不再(zai)是(shi)無(wu)法(fa)完(wan)成的任務。無(wu)障礙(ai)內容(rong)可以(yi)幫助這類用(yong)戶降低使(shi)用(yong)難度，消除(chu)障礙(ai)。

什么是WCAG？

作為(wei)web標(biao)(biao)準(zhun)的(de)(de)(de)牽頭組(zu)織，萬維(wei)網聯盟（W3C）制定了包括Web內(nei)容(rong)無障礙指(zhi)南（WCAG）在內(nei)的(de)(de)(de)一(yi)(yi)系(xi)列指(zhi)南，讓全體用戶(hu)都能(neng)在無障礙的(de)(de)(de)環境下訪問(wen)web內(nei)容(rong)。雖(sui)然(ran)無法照顧到(dao)每一(yi)(yi)個個體的(de)(de)(de)所有(you)(you)情(qing)況，但(dan)無障礙環境這個理念的(de)(de)(de)目標(biao)(biao)是盡可能(neng)讓更多的(de)(de)(de)用戶(hu)能(neng)夠(gou)順利(li)實現與web內(nei)容(rong)的(de)(de)(de)互動。截(jie)至本(ben)稿發布日期(qi)，最新版(ban)的(de)(de)(de)WCAG標(biao)(biao)準(zhun)是2.1版(ban)。雖(sui)然(ran)作為(wei)繼任標(biao)(biao)準(zhun)的(de)(de)(de)WCAG 2.2版(ban)也已(yi)經公布，但(dan)該(gai)版(ban)本(ben)目前還(huan)處(chu)于起草階段(duan)。因此，除非另(ling)有(you)(you)明確說(shuo)明，本(ben)文中(zhong)提及的(de)(de)(de)WCAG均僅指(zhi)WCAG 2.1版(ban)標(biao)(biao)準(zhun)。

WCAG由四(si)大(da)基本原則(ze)組成，每(mei)一(yi)(yi)條(tiao)原則(ze)又包含(han)(han)若干條(tiao)指南(nan)，總(zong)計為(wei)13條(tiao)。這(zhe)13條(tiao)指南(nan)又進一(yi)(yi)步(bu)被細分(fen)為(wei)78條(tiao)可以檢驗的(de)合(he)(he)格標(biao)準(zhun)，部分(fen)合(he)(he)格標(biao)準(zhun)甚至還(huan)包含(han)(han)多種情況。最后，每(mei)一(yi)(yi)種合(he)(he)格標(biao)準(zhun)均由低到高(gao)分(fen)為(wei)A~AAA三(san)個(ge)等(deng)級(ji)，用來表示與(yu)標(biao)準(zhun)之間的(de)貼合(he)(he)程度(du)。因(yin)此，若以滿足最低要求為(wei)目標(biao)，只需關注A級(ji)的(de)合(he)(he)格標(biao)準(zhun)即可。由于這(zhe)種分(fen)級(ji)制度(du)看(kan)起來過(guo)于繁瑣(suo)，因(yin)此W3C貼心(xin)地提供了帶有篩(shai)選(xuan)功(gong)能的(de)快速(su)索引頁(ye)。

一想到無(wu)障(zhang)礙(ai)環境，不少人(ren)(ren)（包括開發人(ren)(ren)員）立刻(ke)想到的是(shi)鍵(jian)盤的無(wu)障(zhang)礙(ai)操作(zuo)和導航(hang)。鍵(jian)盤的無(wu)障(zhang)礙(ai)操作(zuo)固然重要(yao)，但在全部13條(tiao)指南中只(zhi)有一條(tiao)有特(te)別提到過，并(bing)且只(zhi)有四項合格標準(zhun)有所涉及。因此(ci)，WCAG指的必然是(shi)更(geng)偏向廣義層面的無(wu)障(zhang)礙(ai)環境。上述(shu)四大原(yuan)則（可感(gan)知性、可操作(zuo)性、可理解(jie)性、健壯性）可解(jie)決各式各樣(yang)的問(wen)題；其中部分(fen)列(lie)舉(ju)如下。

原則1——可感知性：信息和用戶界(jie)面組件必(bi)須以可感知(zhi)的(de)方(fang)式呈(cheng)現給(gei)用戶。

合格(ge)標準示(shi)例：1.4.1 顏(yan)色的(de)使用——顏(yan)色不是信息(xi)傳遞、動作指示(shi)、響應(ying)提示(shi)和分別視覺元素(su)的(de)唯一(yi)手段。

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

圖2通過(guo)顏色(se)、符(fu)號、文(wen)本的組合來指(zhi)示某(mou)(mou)一動作是否成功或某(mou)(mou)個項目(mu)的狀態。

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

合格(ge)標(biao)準示(shi)例：2.1.4 字符(fu)快捷(jie)鍵(jian)——若(ruo)在內容中(zhong)僅(jin)使用(yong)字母（包括大寫和小寫字母）、標(biao)點符(fu)號(hao)、數字或符(fu)號(hao)字符(fu)來實(shi)現鍵(jian)盤快捷(jie)鍵(jian)，則必須(xu)至(zhi)少(shao)符(fu)合以下條件之一(yi)：

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

如圖3所示，當僅包含(han)字母的快(kuai)捷(jie)鍵(jian)只在(zai)(zai)下拉菜(cai)單獲(huo)得焦點才(cai)激活(huo)時(shi)，即(ji)可通(tong)過這些快(kuai)捷(jie)鍵(jian)在(zai)(zai)下拉菜(cai)單中(zhong)選擇。

合(he)格標(biao)(biao)準示例：2.4.6 標(biao)(biao)題(ti)與標(biao)(biao)簽(qian) – 在標(biao)(biao)題(ti)與標(biao)(biao)簽(qian)中說明(ming)控制用(yong)途(tu)。

如圖(tu)4所示，控制標(biao)簽(qian)描述了各個單(dan)選按鈕(niu)的用途，對輸入(ru)域及(ji)其在上下(xia)文中的用途進行了清(qing)晰、簡潔的說明。

原則3 – 可理解性：信息和用戶界面操作必須(xu)是(shi)可(ke)理解的(de)。

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

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

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

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

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

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

合格標準(zhun)示例：4.1.2 名稱、作用(yong)與值(zhi)(zhi) – 對于所有用(yong)戶(hu)接(jie)口組(zu)件(jian)（包(bao)括(kuo)但不限于：表單元素(su)、鏈(lian)接(jie)、腳本生成(cheng)的組(zu)件(jian)），其名稱和作用(yong)均可(ke)通(tong)(tong)(tong)過(guo)編(bian)程(cheng)的方式確定；狀態(tai)、屬性、值(zhi)(zhi)等(deng)可(ke)由用(yong)戶(hu)設(she)置(zhi)的項目(mu)可(ke)通(tong)(tong)(tong)過(guo)編(bian)程(cheng)的方式設(she)置(zhi)；這(zhe)些項目(mu)變更時會向客(ke)戶(hu)端發(fa)送通(tong)(tong)(tong)知(zhi)，包(bao)括(kuo)輔助技術(shu)。

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

合格標(biao)(biao)準(zhun)示例4.1.3：狀(zhuang)態消(xiao)息 – 在使用(yong)標(biao)(biao)記(ji)語言(yan)實現(xian)的內容中(zhong)，狀(zhuang)態消(xiao)息可通過(guo)作(zuo)用(yong)或屬性(xing)以(yi)編程的方式確定，這樣就可以(yi)在不(bu)獲取焦點的情(qing)況下(xia)以(yi)輔助技(ji)術(shu)將狀(zhuang)態消(xiao)息呈(cheng)現(xian)給用(yong)戶。

在圖8中(zhong)，搜索后的結果消(xiao)息屬于(yu)狀(zhuang)態(tai)消(xiao)息，因此需要合(he)適的作用(yong)或屬性。

符合性

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

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

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

法定義務

在美(mei)國(guo)，《美(mei)國(guo)殘(can)(can)疾(ji)人(ren)(ren)法案》第(di)三章嚴(yan)禁歧(qi)視殘(can)(can)疾(ji)人(ren)(ren)；不(bu)(bu)過這(zhe)項(xiang)規(gui)定(ding)對web內容有(you)多大的(de)(de)影響并不(bu)(bu)明確。對于(yu)《美(mei)國(guo)殘(can)(can)疾(ji)人(ren)(ren)法案》是(shi)否(fou)要求web內容運(yun)營商在其網站和應(ying)用(yong)程序中(zhong)為殘(can)(can)疾(ji)人(ren)(ren)創(chuang)造無障(zhang)礙環境這(zhe)一(yi)點，不(bu)(bu)同的(de)(de)法院之(zhi)間還(huan)存在分(fen)歧(qi)，不(bu)(bu)過從最近的(de)(de)投訴、訴訟、裁定(ding)、看法走向可以(yi)看出， WCAG 2.1 AA級(ji)可充分(fen)滿足(zu)《美(mei)國(guo)殘(can)(can)疾(ji)人(ren)(ren)法案》的(de)(de)要求。

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

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

DevTools

了(le)解WCAG的(de)指(zhi)南和要求(qiu)(qiu)是(shi)好事(shi)，但如何確(que)認您(nin)的(de)web內容或您(nin)使用(yong)的(de)網(wang)(wang)站是(shi)無障礙(ai)的(de)？所(suo)幸的(de)是(shi)，Chrome的(de)DevTools（我們在(zai)之前的(de)文(wen)章中(zhong)討論過(guo)）能(neng)夠提(ti)供多種途徑(jing)確(que)認一個(ge)(ge)網(wang)(wang)頁(ye)是(shi)否(fou)滿足特定的(de)無障礙(ai)環境要求(qiu)(qiu)。首先是(shi)元素檢(jian)查工(gong)具。利用(yong)這(zhe)款工(gong)具在(zai)某個(ge)(ge)頁(ye)面元素上懸停，即可(ke)帶出該元素無障礙(ai)指(zhi)標(biao)的(de)信息提(ti)示框(kuang)(kuang)。在(zai)這(zhe)個(ge)(ge)提(ti)示框(kuang)(kuang)內，您(nin)可(ke)以看到(dao)對比(bi)度、名稱、作用(yong)和能(neng)否(fou)通過(guo)鍵盤獲得焦(jiao)點等信息。雖然無法(fa)覆(fu)蓋給(gei)定符合(he)性等級下的(de)所(suo)有合(he)格(ge)標(biao)準，但是(shi)這(zhe)些項目可(ke)以幫助您(nin)快速確(que)認部分重要需求(qiu)(qiu)和常(chang)見需求(qiu)(qiu)。

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

查看對比(bi)度時，從“無(wu)障礙環境”選(xuan)項卡(ka)切換到“風格”選(xuan)項卡(ka)。點擊色塊(kuai)打開(kai)拾(shi)(shi)色器(qi)。然后，在設色器(qi)中展(zhan)開(kai)對比(bi)度域，即可看到滿足要(yao)求(qiu)的顏色。展(zhan)開(kai)色域時，拾(shi)(shi)色器(qi)上會(hui)出現兩(liang)條(tiao)線，分別表(biao)示AA級和AAA級的符合性。在線條(tiao)同(tong)一側的所有顏色都擁有相(xiang)同(tong)的結果，即：若當(dang)前的對比(bi)度無(wu)法滿足要(yao)求(qiu)，那么在線條(tiao)的同(tong)一側選(xuan)取任(ren)意(yi)一種(zhong)顏色同(tong)樣也無(wu)法滿足要(yao)求(qiu)。

Lighthouse

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

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

在(zai)“分(fen)類”標題(ti)下有一個“無(wu)障礙環(huan)境(jing)(jing)”的復選框(kuang)，選中后即可確保審核(he)(he)工具在(zai)當前頁面(mian)查找無(wu)障礙環(huan)境(jing)(jing)的相關問題(ti)。在(zai)“設備”標題(ti)下，您可以(yi)在(zai)臺(tai)式(shi)電腦和手(shou)機(ji)之間來回(hui)切換，確保您審核(he)(he)的頁面(mian)在(zai)兩(liang)種環(huan)境(jing)(jing)下都滿足(zu)要(yao)求。準(zhun)備就緒后，單擊“生(sheng)成(cheng)報告(gao)”按鈕，Lighthouse就會(hui)運行一系列測試(shi)，對頁面(mian)的易(yi)用性進行評估。

評估(gu)完成(cheng)后會生成(cheng)一份(fen)“無障(zhang)礙環(huan)境”報告，其中(zhong)(zhong)包括整體的(de)“無障(zhang)礙環(huan)境評分”以(yi)及可以(yi)展(zhan)開并繼續檢(jian)查具體元(yuan)素(su)的(de)標(biao)題。將(jiang)鼠標(biao)移到某個元(yuan)素(su)上方，即可在頁面中(zhong)(zhong)高亮(liang)顯示該元(yuan)素(su)，而選中(zhong)(zhong)報告中(zhong)(zhong)的(de)元(yuan)素(su)即可直接跳轉(zhuan)至對應的(de)代碼。

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

雖(sui)然(ran)審核(he)報告在檢查(cha)是(shi)否符合無障礙環(huan)境(jing)指(zhi)南(nan)時非(fei)常實(shi)用，但是(shi)不應將其用于取(qu)代人工檢查(cha)。有些東西是(shi)Lighthouse鞭長莫及的(de)，選項卡的(de)邏(luo)輯(ji)順序就是(shi)一個例子，因此人工檢查(cha)是(shi)非(fei)常必要且推薦(jian)的(de)。

結論

美(mei)國有超(chao)過6000萬的殘(can)障(zhang)人(ren)士，web的無(wu)障(zhang)礙環境(jing)(jing)不應該僅僅只(zhi)是(shi)(shi)馬后炮。采取(qu)一些(xie)辦(ban)法幫助各類殘(can)障(zhang)人(ren)士訪問和使用您的web內容(rong)，不僅可以提升您的用戶規模和客戶群，還可以幫助您避(bi)免吃(chi)官(guan)司。雖然實現并(bing)遵守本文提到的WCAG指南是(shi)(shi)一項沉重的負擔，但最終(zhong)您會發(fa)現，無(wu)障(zhang)礙環境(jing)(jing)是(shi)(shi)物有所(suo)值(zhi)的。