跳至主要内容

了解 WCAG 2.2（網站內容無障礙性指南）

這是 WCAG 2.2 AA 等級的概述。它不會取代 WCAG 2.2 指南 ，後者提供了所有原則和要求的完整解釋。

網站內容無障礙性指南（Web Content Accessibility Guidelines, WCAG）是一套國際公認改善網站無障礙性的建議。

它解釋如何讓每個人都可以存取數位服務、網站和應用程式，包括有以下障礙的使用者：

  • 視力——例如嚴重視力受損（盲人）、視力受損（部分視力）或色盲的人
  • 聽力——例如耳聾或聽力受損的人
  • 行動不便——例如那些難以使用滑鼠或鍵盤的人
  • 思考與理解——例如患有閱讀障礙、自閉症或學習障礙的人

符合政府無障礙要求​

做為符合政府無障礙要求的一部分，服務必須達到 WCAG 2.2 AA 等級。

政府數位服務部（Government Digital Service, GDS）正在研究如何評估 WCAG 2.2 中的新成功標準（Success Criteria），並將於 2024 年 10 月開始監控額外標準。在 2024 年 10 月前，英國政府將監控網站和應用程式是否達到 WCAG 2.1 AA 級 的無障礙性。

WCAG 2.2 設計原則​

WCAG 2.2 基於4個設計原則：

  • 可感知性（perceivable）
  • 可操作性（operable）
  • 可理解性（understandable）
  • 強健性（robust）

著重於原則而非技術，這些原則強調需要思考人們與內容互動的不同方式。例如，使用者可能：

  • 使用鍵盤代替滑鼠
  • 更改瀏覽器設定以使內容更易於閱讀
  • 使用螢幕報讀器大聲「朗讀」（說出）內容
  • 使用螢幕放大鏡放大螢幕的一部分
  • 使用語音導覽網站

這些原則適用於服務的各個方面（包括程式碼、內容和互動），這意味著團隊的所有成員都需要理解並思考它們。

採用WCAG 2.2 指南​

WCAG 2.2 設計原則由 13 條指引提供支持。其中每一項都細分為服務所需符合的特定要求（或「成功標準（Success Criteria）」）。

從 Beta 階段開始，您需要定期進行無障礙測試，以檢查您的設計、程式碼和內容是否符合 WCAG AA 等級。為此，您必須符合所有A和AA等級的要求。

您應該結合使用自動化工具和手動測試（包括無障礙性測試中列出的工具）來識別潛在問題。

您還需要在 Beta 評估之前進行無障礙性稽核，以證明您的服務符合 AA 等級的要求。

原則一：可感知性​

為了符合 WCAG 2.2 原則一：可感知性，您需要確保使用者能夠透過他們可用的感官來識別和使用您的服務。

這意味著您需要：

  • 為非文字內容提供替代文字（alt text）
  • 提供音訊和視訊的逐字稿
  • 為影片提供字幕
  • 確保內容的結構符合邏輯，並且可以透過螢幕報讀器導覽和閱讀——這對於樣式表 (stylesheets) 被停用時也有所幫助
  • 對每個功能（例如表單(forms)和資料表(data tables)）使用正確的標記（markup），以便正確定義內容之間的關係
  • 不要使用顏色做為解釋或區分某些事物的唯一方式
  • 使用在背景顏色下清晰顯示的文字顏色
  • 確保當文字大小增加 200% 時，每個功能都能使用，並且當文字大小增加 400%時內容會回流（reflow）為單欄（column）
  • 不使用文字圖片
  • 確保您的服務具有響應性——例如對使用者的裝置、頁面方向和他們喜歡使用的字體大小
  • 確保您的服務能與輔助科技良好地配合——例如，重要訊息的標記方式使螢幕報讀器知道它們的重要性

譯註：回流（Reflow）是瀏覽器渲染過程之一，當 Render Tree 的佈局改變，就會重新計算 DOM 的位置和大小，這個過程稱之為 Reflow

原則二：可操作性​

為了符合 WCAG 2.2 原則二：可操作性，無論使用者選擇如何存取您的內容（例如，使用鍵盤或語音指令），您都必須確保使用者可以找到並使用。

這意味著您需要：

  • 確保一切內容都適用於僅使用鍵盤的使用者
  • 讓使用者可以播放、暫停和停止任何移動式的內容(moving content)
  • 不使用閃爍 (blinking) 或閃光 (flashing) 的內容——或讓使用者停用動畫
  • 提供「跳到內容」連結或等效方式
  • 對頁面和框架使用描述性標題
  • 確保使用者能夠以合理地方式瀏覽內容
  • 使用描述性連結，以便使用者知道連結會指向何處，或者可下載的連結內容是什麼
  • 使用有意義的標題和標籤，確保任何無障礙化標籤與您在介面中使用的標籤相符或非常相似
  • 讓鍵盤使用者輕鬆查看鍵盤或輔助科技當前關注的項目——這稱為「主動焦點」(active focus)
  • 僅在使用者絕對必要時才使用如滑鼠或動態互動（如滑動或拖曳）的方式，或者讓使用者停用它們並以不同的方式與介面互動
  • 讓使用者可以輕鬆停用和更改快捷鍵
  • 確保互動元素（如按鈕）夠大或間隔夠遠，以便能夠輕鬆選擇正確的元素

原則三：可理解性​

為了符合 WCAG 2.2 原則三：可理解性，您必須確保使用者能夠理解您的內容以及服務的運作方式。

這表示您需要執行以下操作：

  • 明確標明內容所使用的語言，並在語言更改時提示
  • 確保各項功能(包括說明機制)看起來一致並且以可預測的方式執行
  • 確保所有表單欄位都具可見且有意義的標籤，並且已正確標記
  • 讓使用者能夠輕鬆識別並更正表單中的錯誤——您可以在 GOV.UK 設計系統中找到表單設計的最佳實踐
  • 讓使用者可以輕鬆地重新輸入之前輸入過的表單資料
  • 讓使用者輕鬆登入，無需記住資訊或解答問題

原則四：強健性​

為了符合 WCAG 2.2 原則四：強健性，您必須確保您的內容可以被各種使用者代理（包括輔助科技）可靠地解讀。

這表示著您需要執行以下操作：

  • 確保您的程式碼讓輔助科技知道每個使用者介面元件的用途、目前所處狀態以及是否發生變化
  • 確保重要的狀態訊息或互動視窗（對話框）的標記方式能夠告知使用者其存在和目的，並讓他們使用輔助科技與其進行互動