可理解
本文提供了實用的建議,說明如何編寫您的網頁內容,使其符合《Web 內容可訪問性指南 (WCAG) 2.0 和 2.1》中**可理解性**原則所概述的成功標準。可理解性原則指出,資訊和使用者介面的操作必須是可理解的。
注意:要閱讀 W3C 對可理解性及其指南和成功標準的定義,請參閱原則 3:可理解性 — 資訊和使用者介面的操作必須是可理解的。
指南 3.1 — 可讀性:使文字內容可讀和可理解
本指南著重於使文字內容儘可能易於理解。
| 成功標準 | 如何符合標準 | 實用資源 |
|---|---|---|
| 3.1.1 頁面語言 (A) | 每個網頁的預設人類語言應該可以透過程式碼檢測。這對於確保讀者到達適合他們語言的頁面等目的至關重要。最簡單的方法是在頁面的 <html> 元素上設定 lang 屬性,並賦予其一個最能代表頁面所用語言的語言程式碼值。 |
請參閱設定文件的主語言。 |
| 3.1.2 部分語言 (AA) |
如果頁面內容包含與主語言不同的單詞或短語,請在相關術語的包裝元素上(例如,如果沒有語義元素可用,則使用 您無需為不分語言相同的詞語或短語(例如專有名詞、不屬於特定語言的技術術語)設定不同的語言。 |
|
| 3.1.3 不尋常的詞語 (AAA) | 如果使用了技術術語、行話或習語/俚語,應為這些短語/詞語提供定義。您的網站應提供一個詞彙表,其中包含這些詞語/術語的定義,您可以在它們出現時連結到這些定義,或者至少在周圍文字中或頁面底部的描述列表中提供定義。 | |
| 3.1.4 縮寫 (AAA) |
如果使用縮寫,您應該根據需要提供其完整形式或定義。 人們通常認為 |
請參閱縮寫。 |
| 3.1.5 閱讀水平 (AAA) |
如果提供的文字需要高於初中教育水平(通常是 11-14 歲左右的兒童)的閱讀水平,請提供補充解釋材料以幫助無法閱讀的人,或提供一個以初中水平編寫的替代版本。 這並不意味著所有主題內容都應該被所有人理解,而是寫作風格應該對所有人開放。最好將所有內容都以初中水平編寫,即使是程式設計教程等技術文件,除非有充分的理由不這樣做(例如,為了詩意效果的替代風格),或者它們必須以嚴格的風格編寫(例如,W3C 規範)。 |
|
| 3.1.6 發音 (AAA) |
應提供一種機制,允許使用者在需要充分理解內容時訪問單詞的發音。 HTML |
請參閱影片和音訊內容,以及英語詞典發音指南 |
注意:另請參閱 WCAG 對指南 3.1 可讀性:使文字內容可讀和可理解的描述。
指南 3.2 — 可預測性:使網頁以可預測的方式出現和操作
本指南著重於使使用者介面直觀且易於理解。
| 成功標準 | 如何符合標準 | 實用資源 |
|---|---|---|
| 3.2.1 獲得焦點時 (A) |
當控制元件或其他頁面功能獲得焦點時,它不應以可能混淆或使使用者迷失方向的方式改變上下文。 這是一個明智的設計問題——人們不希望介面給他們帶來驚喜;他們希望事情是直觀的,並按預期行事。例如,聚焦導航選單選項不應改變顯示的頁面——它應該在顯示改變之前被啟用。 |
Element 的 focus 事件包含一些有用的資訊。另請參閱重新構建鍵盤可訪問性以獲取一些有用的實現思路。 |
| 3.2.2 輸入時 (A) |
當資料輸入到控制元件中,或設定更改時,上下文不應意外改變。使用者應在更改發生之前被警告/告知即將發生的更改。 同樣,應實施明智的設計。例如,如果按下按鈕導致應用程式退出當前檢視,應要求使用者確認此操作,如果合適,儲存他們的工作等。 |
input 事件在此處很有用。 |
| 3.2.3 導航一致性 (AA) |
導航選單/控制元件的樣式和定位應在網頁的不同頁面或檢視之間保持一致,並且現有專案應按相同的順序出現,即使例如添加了新專案。如果使用者啟動了更改,例如,為導航選擇了不同的配色方案或位置,則其選擇應在所有頁面上得到尊重。 同樣,明智的設計——使所有頁面或檢視中的導航控制元件保持一致。 |
有關佈局的現代標記資訊,請參閱邏輯地組織頁面部分。另請參閱將連結樣式化為按鈕,以獲取一個有用的可訪問導航選單示例。 |
| 3.2.4 識別一致性 (AA) |
具有相同功能的控制元件或元件應在不同頁面或檢視中以相同的方式標識。例如,出現在世界旅行網站每個頁面上的貨幣轉換器,在語義和標籤方面都應該完全相同。 同樣,明智的設計! |
“標籤”可以指文字內容中的描述性資訊,或 HTML 表單標籤。有關更多資訊,請參閱使用有意義的文字標籤。 |
| 3.2.5 按請求更改 (AAA) |
可能使人困惑或迷失方向的上下文更改,只應在使用者請求時發生,或者使用者應該能夠關閉它們。 如果您需要對當前檢視進行重大更改(例如,內容或控制元件),請讓使用者控制何時發生該更改(例如,顯示哪個頁面,何時在畫廊中前進到下一張照片……)。 如果您需要在頁面上使用輪播圖,請提供一個選項來停止其自動前進。如果可能,最好避免此類功能。 |
|
| 3.2.6 一致的幫助 (A) | 包含幫助機制(包括自助選項和人工聯絡方式)並在多個網頁上重複出現的網頁,需要將這些機制以相同的順序放置在所有頁面上,除非由使用者發起更改。 | 查閱此標準的一致幫助文件以瞭解更多資訊。 |
注意:另請參閱 WCAG 對指南 3.2 可預測性:使網頁以可預測的方式出現和操作的描述。
指南 3.3 — 輸入幫助:幫助使用者避免和糾正錯誤
本指南主要圍繞幫助使用者在需要時以最少的錯誤輸入正確資訊。
| 成功標準 | 如何符合標準 | 實用資源 |
|---|---|---|
| 3.3.1 錯誤識別 (A) |
當用戶填寫表單或在選項之間選擇時,任何檢測到的錯誤都應清晰地報告給使用者,並說明錯誤所關聯的表單控制元件。 建議透過 HTML 表單驗證功能和/或 JavaScript 實現客戶端錯誤檢測和處理,具體取決於您的具體情況。當檢測到錯誤時,應在錯誤的表單輸入旁邊顯示直觀的錯誤訊息,以幫助使用者更正其輸入。對於螢幕閱讀器使用者,您可以使用 aria live regions 來提醒使用者頁面上的更改。 注意:伺服器端驗證應始終與客戶端驗證一起使用。客戶端驗證太容易關閉或繞過,因此不能單獨依賴它。 |
有關全面的驗證資訊,請參閱表單資料驗證,有關即時區域的資訊,請參閱WAI-ARIA:動態內容更新。 |
| 3.3.2 標籤或說明 (A) |
當需要資料輸入時,應提供清晰的說明。當需要簡短的說明或提示時,您可以對單個輸入(如姓名或年齡)使用 當需要更復雜的解釋時,您也可以隨時包含解釋段落,或者您可能需要嘗試使您的表單更直觀。 |
|
| 3.3.3 錯誤建議 (AA) |
當檢測到錯誤並已知糾正建議時,將其提供給使用者(例如,當用戶選擇使用者名稱並選擇了已被佔用的使用者名稱時,建議替代方案),除非這樣做會導致安全問題(例如,輸入密碼時)或上下文問題(例如,他們正在嘗試回答測驗應用程式中的問題)。 在這種情況下,如果合適,您可能會結合使用 JavaScript 和伺服器端功能來檢查輸入是否正確,如果不對,可以向用戶提供哪些可行的建議。這些建議應像錯誤訊息一樣在上下文中有效地顯示(參見 3.3.1)。 |
暫無教程建議。 |
| 3.3.4 錯誤預防(法律、財務、資料) (AA) |
對於涉及敏感資料(如法律協議、電子商務交易或個人資料)輸入的表單,以下至少一項應為真:
|
可撤銷 — 對於任何可以輸入資料的檢視,提供一個等效檢視,允許您根據需要編輯甚至刪除條目(例如,請參閱Django Web 框架)。 檢查資料 — 如 3.3.1 所述,應結合客戶端和伺服器端驗證來檢測錯誤並向用戶顯示有用的訊息,以允許他們糾正其輸入。 確認和糾正 — 在適當的情況下,在填寫一系列表單欄位以執行任務(例如購買產品)後,應向用戶顯示確認螢幕,他們可以在其中檢視其輸入並糾正任何看起來不正確的內容。這種模式通常用於亞馬遜等電子商務網站。 |
| 3.3.5 提供上下文相關幫助 (AAA) | 在上下文中提供說明和其他適當的提示,以幫助完成和提交表單。 | 這實際上只是在 3.3.1 和其他類似標準的基礎上進行擴充套件,但需要更全面的上下文幫助資訊和服務,例如,在每個頁面上提供指向幫助頁面或服務的專用連結,提供示例以說明成功完成後的外觀。 |
| 3.3.6 錯誤預防(所有) (AAA) | 本原則建立在 3.3.4 的基礎上,將其要求擴充套件到所有使用者輸入情況,而不僅僅是涉及敏感資料的情況。 | 再次參見 3.3.4。 |
| 3.3.7 冗餘輸入 (A) | 在相同過程或使用者流程中,使用者之前輸入或提供的資訊要麼自動填充,要麼可供使用者從選項列表中選擇,除非重新輸入資訊對於安全原因至關重要或必需,或者資訊不再有效。 | 查閱瞭解冗餘輸入以瞭解更多資訊。 |
| 3.3.8 可訪問的身份驗證(最低限度) (AA) | 身份驗證過程中的任何步驟都不需要認知功能測試(如記住密碼),除非提供了替代方案,例如物件或個人內容(例如影像、影片和音訊)識別,或輔助機制(例如複製貼上和自動儲存密碼)。 | 查閱此標準的可訪問身份驗證文件以瞭解更多資訊。 |
| 3.3.9 可訪問的身份驗證(增強) (AAA) | 在身份驗證過程中的任何步驟中,都不得要求進行認知功能測試(例如記住密碼),除非提供不依賴認知功能測試的替代方案,或提供協助使用者完成認知功能測試的機制。允許要求使用者識別物件或識別使用者提供給網站的非文字內容的身份驗證測試。 | 查閱增強型可訪問身份驗證文件 (AAA) 以瞭解更多資訊。 |
注意:另請參閱 WCAG 對指南 3.3 輸入幫助:幫助使用者避免和糾正錯誤的描述。