無障礙網頁設計基礎知識：WCAG 2.2中AA級成功準則的具體要求

在當今數位化時代，網頁內容的無障礙訪問性已成為衡量網站質量的重要標準之一。Web內容無障礙指南（WCAG）2.2版本，作為國際公認的網頁無障礙設計標準，旨在確保所有用户，無論其身體條件如何，都能平等、方便地訪問和使用網頁內容。

在本文中，香港網頁（HKWEB）將詳細解析WCAG 2.2中AA級成功準則的具體要求，並探討如何在實際網頁設計中加以應用。

推薦閲讀：

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



無障礙網頁設計基礎知識：WCAG 2.2中AA級成功準則的具體要求

1. 字幕（直播）

網頁載入聲音檔案後，如果沒有字幕，往往只有聽覺健全的使用者才能明白聲音檔案中的內容。反之，如果能夠確保所有「直播」的聲音和視像均附有字幕，這將有助於聽障人士瞭解檔案內容。

2. 口述影像（預先錄製）

網頁如提供視像讓使用者觀看，必須確保同時提供有關該視像內容的口述影像，讓看不到視像的人士也能明白當中內容。

3. 方向

除非視像播放器限制了顯示方向為橫向，否則應該能從直向或橫向觀看或操作內容，以確保身體殘障人士可將設備以固定方向安裝在輪椅上，並且能夠從最適合他們的方向觀看內容。

4. 確定輸入目的

啟動自動完成屬性功能來提升瀏覽器的能力，同時在表格各欄位預填使用者的選定值，可以讓使用者更容易填寫表格，特別是方便患有認知障礙的人士使用。

5. 對比度（最低）

在設計文字和圖像時，主體與前景的顏色對比度應至少設定為4.5:1，以便使用者可更清楚閲覽當中的文字。當然，商標及裝飾設計元素無需符合該條件。

6. 調整文字大小

在網頁上端部分附加調整文字大小的功能後，確保所有文字都可放大最少兩倍，而不會因此失去任何內容或功能，這樣可以方便輕度視障人士無須使用屏幕放大軟件等輔助技術也能閲覽內容。

此外，在建立網站時，應確保內置的瀏覽器文字大小調整工具能夠正常操作。開發人員亦應正確運用層疊樣式表（CSS）技術，確保層疊樣式表能與內置的瀏覽器文字大小調整功能相容。

7. 文字圖像

在可能的情況下，避免透過圖像形式來顯示文字，因為一般網頁解讀輔助工具（如讀屏軟件等）食無法解讀圖像內的文字，而必須依賴圖像的alt標籤。此外，當使用者選用較大的字型時，瀏覽器也無法調整圖像中文字的大小。

8. 重新排列

網站需採用響應式網頁設計技術，確保使用者在縮放網頁時，不會因此失去任何資訊及功能，以及無須橫向滑動來顯示內容。

9. 非文字對比

所有提供重要資訊的非文字內容（例如圖像、圖表、按鈕、複選框、單選按鈕或輸入欄），與相鄰顏色的對比度應至少為 3:1，讓使用者更容易識別。

10. 文字間距

避免使用絕對值（即像素數目）來界定標題（h1）及次標題（h2）文字的行高，否則用者放大網頁內容時，標題及次標題的文字會被截斷，而難以閲讀。反之，以相對值（即百分比）界定 h1 及 h2 的行高，可以確保使用者在縮放網頁內容時，h1 及 h2 的行高能夠作出相應的更改，內容也可以更清楚地顯示。

11. 在滑鼠停留位置或焦點上的內容

如附加內容在焦點／滑鼠停留位置出現，應確保符合以下所有條件：

— 可關閉的：使用者可以利用鍵盤（例如以 escape 鍵）關閉附加內容，而無須移動焦點／滑鼠停留位置；

— 滑鼠可停留的：使用者可在附加內容上移動指針，而不會令附加內容消失；以及

— 持續可見的：附加內容仍然可見，直至在滑鼠停留位置或焦點的觸發功能被移除，或使用者關閉附加內容，或附加內容的資訊不再有效為止.

12. 多種途徑

網站應該應確保網站提供多於一個選擇網頁的途徑，例如搜尋功能、網頁指南、標準導覽列等，讓使用者能夠更方便快捷地查找所需的資訊。對於有學習障礙或無法長時間集中精神的使用者而言，網頁指南之類的功能是十分有用的。

13. 標題和標籤

標題和標籤必須準確描述所附載的內容，這對使用讀屏軟件的人士會有很大幫助。

14. 清晰可見的焦點

當焦點移到互動元素（例如連結、按鈕、表格輸入欄等）時，確保遊標清楚顯示位置。例如，確保遊標在文字輸入欄內清晰可見，讓使用者知道在哪個位置開始輸入資料。

15. 不被遮擋的焦點（最小）

當焦點移到某個項目時，確保焦點項目的部分可見，讓使用鍵盤操作網頁的使用者能夠確定他們在網頁上的位置。

16.拖曳動作

任何拖曳動作，應該提供一個簡單的指針操作方法，例如在地圖上添加上、下、左和右按鈕的移動方法；或者是在表格中增加向上和向下按鈕作為使用者更改工作坊優先順序的方法。

17. 目標大小（最小）

確保所有目標的最小尺寸為 24 x 24的像素，或周圍有足夠的間距，避免使用者避免無意間點擊錯誤的按鈕，並使控制項目更易於啟動。

18. 各部分的語言

編寫內容時，確保當中的文章和語句所使用的語言清晰易明，這可讓讀屏軟件因應所用的語言而準確地發音。

19. 一致的導覽列

如導覽列或鏈接會在多個網頁出現，應確保它們在所有網頁的展示方式一致。

20. 一致識別

如果兩個按鈕所使用的標籤各有不同，可能會令某些使用者產生混淆，特別是那些使用讀屏軟件的使用者，因為他們可能無法察覺這兩個按鈕均具相同功能。反之，所有具相同功能的項目使用相同的標籤，有助於讓使用者知道這些按鈕具有相同功能。

21. 錯誤提示

確保網頁在使用者操作出錯時，能夠提供準確且有效的提示。如果錯誤提示作用不大，使用者便無法準確知道哪些部分需要更正。

22. 錯誤預防（針對法律、財務、數據資料）

如果使用者提交須負上法律或財務責任的數據資料，應確保系統可容許使用者在提交前檢查並確認有關數據資料，或者在提交數據資料後可以取消交易。

23. 無障礙認證（最小）

確保使用者在登入帳户時有一種無障礙、易於使用且安全的方法進行身份認證，需至少符合下列其中一個條件：

— 提供一種不需要認知評估的方法；

— 協助使用者通過認知測驗；

— 認知測驗涉及物體識別，或認知測驗檢查使用者識別流動應用程式內非文字內容的能力。

24. 狀態訊息

對於任何可見的狀態訊息（例如不明顯地加到頁面上的錯誤或成功訊息），即使有關狀態訊息不是在焦點上，也應利用輔助技術工具通知使用者。實施這項準則的可行方法之一是界定無障礙多樣化網際網路應用程式(Accessible Rich Internet Application,ARIA)的角色（狀態、警報）或活動區域。

遵循WCAG 2.2 AA級成功準則，不僅能夠提升網頁內容的無障礙訪問性，還能改善普通用户的體驗。通過實施上述準則，我們可以創建一個更加包容、易用、安全的網絡環境，讓每個人都能平等地享受數位化時代的便利，還有機會為自己的品牌獲得好「掌聲」及收益。