網頁設計基礎知識點：WCAG 2.2 A級成功準則主要包括哪些內容？

信息化時代，互聯網已經成為們日常生活中不可或缺的一部分。然而，對於殘疾人士而言，網站的使用往往存在諸多不便。為瞭解決這一問題，萬維網聯盟（W3C）推出了《無障礙網頁內容指引》（Web Content Accessibility Guidelines, WCAG）。

WCAG 2.2 作為當前版本的指南，包含了三個級別的成功準則：A級、AA級和AAA級，其中A級是最基本的無障礙要求。而在本文內容中，我們將重點説説「WCAG 2.2 A級成功準則主要包括哪些內容」。

網頁設計基礎知識點：關於萬維網聯盟的《無障礙網頁內容指引》



《無障礙網頁內容指引》（Web Content Accessibility Guidelines，WCAG）是來自萬維網聯盟（World Wide Web Consortium, W3C）的網絡無障礙計劃（W3C Web Accessibility Initiativ，WAI）的一部分，旨在協助網頁設計人員和開發人員建立更合乎殘障人士或受年齡相關限制人士需要的網站。

《無障礙網頁內容指引》闡釋了網站可如何採用無障礙設計，以便殘疾人士使用。該指引雖然看似十分複雜，但其實思路和內容都十分清晣，任何網站開發人員只須稍事閲讀，便能理解如何採用和遵守這些指引。

網頁設計基礎知識點：WCAG 2.2 A級成功準則主要包括哪些內容？



1. 非文字內容

確保網站上所有內容均以文字形式顯示，以便讓讀屏軟體能夠正確讀取所有資料。例如，圖像必須提供描述性的alt文本，同時確保這些描述能夠準確反映圖像內容或功能，從而便於讀屏軟體讀取。

至於圖形驗證碼（Captcha）或僅屬裝飾而不傳遞訊息的圖像，則無須一定要附有文字描述。

2. 純聲音和純視像檔案

為預先錄製的聲音和視像檔案提供文字轉寫、音頻描述或字幕等替代方法，讓無法接受這些檔案內容的用户也能獲取資訊。例如視障人士無法正常看到視像資訊，須提供其他途徑（如聲音旁白）以幫助他們理解視像內容。

3. 字幕

為聲音檔案、視像檔案提供字幕，方便聽障人士可以知悉檔案的內容。除了為聲音或視像內容提供字幕外，還應該針對重要提示和背景聲音提供相關的字幕，以便聽障人士更容易理解。

4. 口述影像或其他媒體選擇

視障人士對有聲音的視像檔案往往只能聽到聲音而無法看到圖像，因此網站應提供額外的解説描述畫面正在發生的事情，或者提供文字稿並同時解説聲音檔案內容及畫面正在發生的事情。

5. 網頁結構

健全人士能夠看到整個網站的佈局並迅速察悉網頁的結構和層次，但視障人士是無法透過這種方式來訪問網站的。因此，網站需要站需要提供恰當的標記，以便讀屏軟體解讀有關結構，方便視障人士瞭解；同時鏈接應按組別分類，以便讀屏軟體確定這些鏈接之間的關係。

6. 有意義的序列

如果網頁內容必須按特定次序閲讀才具意義，應該確保網頁的編寫／編碼的方式能夠指示出這個次序，例如使用HTML的列表結構（如ol標籤、ul標籤）或適當的標題層級（如h1標籤至h6標籤）來指示這個次序。

7.  感官的指示

切勿只依賴聲音、形狀、大小或視覺位置作為指示，比如「點擊右面的按鈕提交資料」，這種模稜兩可的指示會讓視障人士無法準確知道該按鈕的位置。建議提供精準的文字説明或可觸摸的指示來輔助用户操作。

8.  顏色的使用

部分視障或色盲人士是無法準確分別某些顏色之間的區別，因此網頁設計切勿僅依賴顏色來區分或傳遞資訊，而是應該使用文字、圖標或其他視覺對比來增強信息的可識別度。

9. 聲音控制

對於使用讀屏軟體者，網頁如果使用自動播放聲音功能，往往令他們難以集中精神，因此頁面應為他們提供「關掉聲音」或「調校音量」的按鈕並置於顯眼位置，方便這些用户更有效地訪問頁面。

10. 鍵盤操作

部分用户可能因某些特殊情況而只能使用鍵盤來操控網頁，因此我們需要確保所有內容和功能均可以利用鍵盤操控，如讓他們可以透過Tab鍵或 Enter鍵來瀏覽或使用有關內容和功能。同時，提供便捷的退出對話框、彈出視窗或其他交互元素的方法。

11. 字符鍵快捷鍵

當網站使用字母、標點符號、數字或符號字符等作為鍵盤快捷鍵時，須至少符合以下其中一個條件，確保用户在訪問過程中發生衝突：

——   開啟/關閉：提供便捷的開啟或關閉快捷鍵功能

——   重新定義：讓用户可以自行定義快捷鍵，包括使用一個或多個不可打印的鍵盤字符（如Ctrl、Alt等）

——   僅在焦點上處於活動狀態：快捷鍵只會在焦點上才處於活動狀態

12. 可調校的使用時限

如非必要，盡量確保網頁的所有部分不設有「使用時限」；否則，應提供延長、調校或取消時限的選項，確保用户有足夠時間使用網頁。

13. 暫停、停止、隱藏

如果網頁載有自動移動或更新的內容或元素，應提供暫停、停止、隱藏等途徑讓用户可以輕鬆控制這些元素的顯示方式。

14.  把閃動次數限為不多於每秒三次

將網頁所有閃動內容調暗，確保這類內容只佔屏幕的一小部分，或者將閃動次數控制在每秒三次以下，以避免對用户造成不必要的視覺幹擾，同時可以降低閃光可能會對癲癇症患者造成影響。

15. 跳過障礙

為用户提供「跳過」不必要內容的功能（例如網頁上方的導覽列），同時在每個網頁的上方增設可直達主內容的鏈接，方便用户以最短時間內獲取想要資訊。

16. 網頁標題

為每個網頁設置一個描述性強且準確的標題，進而幫助用户按其瀏覽記錄來區分網頁並提高網站的可訪問性。

17. 焦點次序

以超文本標記語言為網頁編碼時，應確保網頁內容按邏輯次序編碼，並使用適當的HTML標籤來指示焦點次序，讓讀屏軟體以合乎邏輯的方式解讀網頁。

18. 鏈接目的

為每個鏈接提供清晰且描述性的文本説明，確保用户可以透過文字説明、鏈接文字及其周圍的內文等，理解每條鏈接的意義。

19. 指針手勢

簡化用户操作，以允許用户使用更簡單的動作來訪問網站，例如使用點擊或長按來取代滑動、拖曳控制桿或雙指揑合等複雜手勢進行縮放畫面。

20.  指針取消

完成特定操作時，通過向上動作（如鬆開鼠標按鈕或從屏幕移開手指）來終止或復原該功能；但當向下的動作（例如鋼琴鍵盤模擬程式）是必要的時候，則屬例外。

21. 名稱中的標籤

所有可見文字標籤必須與編碼中的名稱一致，方便使用語音轉換文字技術的使用者根據可理解的視覺標籤與相關內容互動。

22. 動作啟動

通過移動裝置（例如搖動或傾斜）或通過手勢操作裝置的功能（例如相機可詮釋手勢並啟動某功能），應可由較傳統的使用者界面元件來操作。

23. 網頁語言

應確保網頁的主要語言與 HTML 編碼脗合，讓讀屏軟體正確解讀網頁的文字，並且保證該軟體工具能夠識別網頁的語言。

24. 焦點

應確保在使用鍵盤的Tab鍵把焦點移至網頁的某個項目時頁面不會有所改變，例如當使用者按下Tab鍵把焦點移至輸入欄時，不會出現對話方塊。

25. 輸入

確保用户在更改網頁上的選項時，頁面不會出現自動變更情況，如彈出視窗、更新內容以及跳轉到另一個頁面。

26. 一致的求助

如果求助機制位於多個網頁上，應確保求助欄位在所有頁面上的同一位置呈現。

27. 錯誤識別

如果使用者在操作時出錯，網頁應以文字向他們説明出錯位置和錯誤內容，並附上解決方案。

28. 標記或指示

為免殘疾人士在表格輸入資料時出錯，應向他們提供簡明的指示和提示，比如在各表格旁附上正確的指示和案例；資料填寫錯誤時，應提供理由和解決方案。

29. 重覆的輸入

為幫助使用者能夠輕鬆地完成多步驟流程，不要在同一過程中詢問兩次相同的資訊。

30. 語法分析

確保網頁妥為編寫／編碼。例如，在每個部分的開端和結束處附加標籤，以確保讀屏軟件能夠準確解讀網頁。

* 這項成功準則已從 WCAG 2.2 中刪除。在 WCAG 2.1 和 2.0 中，對於使用 HTML 或XML 編寫的內容，應符合此成功準則的要求。

31. 名稱、角色、數值

確保網頁的各個部分均編上「名稱」 （name）、「角色」 （role）以及「數值」（value） 的標籤，確保讀屏軟體能夠更準確地解讀網頁並提供有用的信息給用户。

遵循WCAG 2.2的成功準則A級，可以確保網站對大多數用户都是友好且可訪問的。當然，如果你希望自己的網站能夠為殘疾人士提供更加包容和便捷的數字體驗，應確保符合WCAG 2.2的更高標準，以確保這類用户能夠正常訪問及使用網站。