可操作

本文提供實用建議,說明如何編寫網頁內容,使其符合《Web 內容無障礙指南 (WCAG) 2.0 和 2.1》中**可操作性**原則所列出的成功標準。可操作性原則指出使用者介面元件和導航必須可操作。

注意:要閱讀 W3C 對可操作性及其指南和成功標準的定義,請參閱原則 2:可操作性 — 使用者介面元件和導航必須可操作。

指南 2.1 — 鍵盤可訪問:使所有功能都可以透過鍵盤操作

本指南涵蓋了除了其他方式(例如滑鼠)之外,透過鍵盤提供核心網站功能的必要性,以便依賴鍵盤控制元件的使用者可以訪問它們。

成功標準 如何符合標準 實用資源
2.1.1 鍵盤 (A) 所有功能都應可以使用鍵盤控制,除非無法透過鍵盤完成(例如徒手繪圖)。應儘可能使用內建控制元件(例如,透過表單控制元件進行 Tab 鍵切換),並且僅在需要時才構建自定義功能。 請參閱儘可能使用語義化 UI 控制元件重新構建鍵盤可訪問性
2.1.2 無鍵盤陷阱 (A)

使用鍵盤進入某個功能區域後,您應該能夠使用鍵盤再次離開該區域。例如,如果您在聚焦按鈕上按 Enter/Return 以開啟選項視窗,您應該能夠再次關閉該視窗並使用鍵盤返回主內容。

這非常重要,以便鍵盤使用者不會被困在應用程式的特定區域。

2.1.3 鍵盤 — 所有功能 (AAA) 這是超出標準 2.1.1 的進一步一步。要實現 AAA 符合性,所有功能都應可以使用鍵盤控制 — 無一例外。 請參閱儘可能使用語義化 UI 控制元件重新構建鍵盤可訪問性
2.1.4 字元鍵快捷方式 (A) 如果存在單個字元鍵快捷方式,則以下至少一項為真:單個字元鍵快捷方式可以關閉、重新對映或僅在相關使用者介面元件處於焦點時才啟用。 理解字元鍵快捷方式

指南 2.2 — 足夠的時間:為使用者提供足夠的時間閱讀和使用內容

本指南涵蓋了功能可能有時限的情況。例如,出於安全原因,購買有時需要在時限內完成。

成功標準 如何符合標準 實用資源
2.2.1 時間可調整 (A)

對於有時限的功能(例如,完成酒店或航班預訂通常有時限),應向用戶提供控制元件,允許他們調整、延長或關閉時限。

例外情況是時限超過 20 小時的活動、即時事件(例如,即時多人遊戲)以及任何需要時限且如果關閉則會失效的其他活動。

2.2.2 暫停、停止、隱藏 (A)

對於自動開始、持續時間超過 5 秒並與其他內容一起顯示的可移動/閃爍內容,應提供控制元件以暫停、停止或隱藏它。這不適用於對體驗至關重要的可移動/閃爍內容。示例包括滾動文字和影片。

對於自動開始並與其他內容一起顯示的自動更新資訊,應提供控制元件以暫停、停止或隱藏它,或控制更新頻率。這不適用於對體驗至關重要的自動更新內容。示例包括輪播或旋轉公告。

2.2.3 無時間限制 (AAA) 這建立在標準 2.2.1 的基礎上,指出希望透過 AAA 符合性的內容不應有時限。
2.2.4 抑制中斷 (AAA) 任何中斷,如警報或插頁式廣告,都應具有抑制或推遲它們的功能,除非是緊急警報。
2.2.5 重新認證 (AAA) 如果在 Web 應用程式使用過程中認證會話過期,使用者可以重新認證並繼續使用,而不會丟失任何資料。
2.2.6 超時 (AAA)

如果存在超時(由使用者不活動引起),請在流程開始時警告使用者,這樣他們就不會對超時感到驚訝(或者只允許在不活動 20 小時後才發生超時)。

理解超時

指南 2.3 — 癲癇和生理反應:不要以已知會導致癲癇或生理反應的方式設計內容

這指的是如果內容不改變,可能會導致患有癲癇等疾病的使用者癲癇發作,或者導致患有前庭功能障礙等疾病的使用者出現身體反應(如頭暈)。

成功標準 如何符合標準 實用資源
2.3.1 三次閃爍或低於閾值 (A) 內容不包含任何每秒閃爍超過三次的方面,或者閃爍內容低於可接受的閃爍和紅光閃爍閾值
2.3.2 三次閃爍 (AAA) 內容不包含任何每秒閃爍超過三次的方面。
2.3.3 互動動畫 (AAA) 允許使用者停用互動動畫(除非動畫是必需的)。 理解互動動畫

指南 2.4 — 可導航:提供幫助使用者導航、查詢內容並確定其位置的方法

本指南下的符合性標準涉及使用者如何定位自己,以及如何找到當前頁面或網站其他頁面上所需的內容和功能。

成功標準 如何符合標準 實用資源
2.4.1 繞過塊 (A)

應提供一種機制,允許使用者直接跳到頁面上的主要內容或可用功能,跳過重複的功能(例如公司徽標或導航)。這通常透過“跳過連結”實現——放置在頁面源頂部並連結到主要內容,並透過 CSS 隱藏的連結。

如果提供了適當的標題和語義容器結構以進行導航(例如 <section><aside> 等),則不需要額外的“跳過連結”。

需要新增一個關於“跳過連結”的部分。
2.4.2 包含頁面標題 (A) 每個網頁都應包含一個資訊豐富的<title>,其內容描述頁面的內容/目的。 請參閱新增標題
2.4.3 邏輯焦點順序 (A) 可聚焦頁面功能(例如,連結、按鈕、表單輸入)的“Tab 鍵順序”應具有邏輯意義,這意味著頁面對於非視覺/鍵盤使用者仍然可用。 請參閱儘可能使用語義化 UI 控制元件以獲取有關 Tab 鍵切換到控制元件的一般建議。如果您需要以不尋常的佈局放置元素,最好確保源順序合理,然後使用 CSS 功能(如定位)來處理佈局。
2.4.4 連結目的(在上下文中) (A) 連結的目的/目的地可以從連結文字或其周圍環境(例如,周圍文字)確定。例外情況是連結目的對所有使用者都不明確(請參閱對一般使用者不明確以獲取對此的有用解釋)。 請參閱使用有意義的文字標籤。另請注意,您應儘量減少同一文字的多個副本連結到不同位置的情況。這可能會給螢幕閱讀器使用者帶來問題,他們通常會脫離上下文列出連結——多個都標有“點選這裡”、“點選這裡”、“點選這裡”的連結會讓人困惑。
2.4.5 多種導航機制 (AA)

您應該提供至少兩種通用導航機制來查詢網站上的頁面,例如導航選單、麵包屑導航、網站搜尋、網站地圖、相關連結列表等。

唯一的例外是頁面是某個過程中的一步,因此邏輯上只應有指向前一步和後一步的連結。

這些機制中的大多數都可以使用完全支援的 HTML 功能建立,例如,請參閱搜尋欄位建立導航選單將連結樣式化為按鈕
2.4.6 標題和標籤 (AA) 標題(例如,<h2>)和<label>元素應清晰描述它們所描述的內容和表單元素的用途。

請參閱儘可能使用語義化 UI 控制元件使用有意義的文字標籤標題和段落的基礎知識<label> 元素

請注意,您應避免重複標題或標籤(例如,多個“更多資訊”例項),除非結構允許您輕鬆區分它們。

2.4.7 可聚焦元素的可見焦點 (AA) 當透過 Tab 鍵切換可聚焦元素(如連結或表單輸入)時,應有一個視覺指示器來顯示當前哪個元素具有焦點。這通常預設是虛線或藍色輪廓(取決於瀏覽器、平臺等),但這可以透過 CSS 覆蓋。 請參閱儘可能使用語義化 UI 控制元件
2.4.8 網站內位置 (AAA) 在複雜網站或一系列步驟中的頁面上時,應向用戶提供他們當前在網站中的位置指示,例如麵包屑導航、網站地圖或諸如“表單第 2 頁,共 10 頁”之類的文字。
2.4.9 連結目的(僅限連結) (AAA) 此標準建立在 2.4.4 的基礎上,指出為了符合 AAA,連結的目的/目的地應僅從連結文字本身確定,即使脫離上下文也是如此。 請參閱使用有意義的文字標籤。另請注意,您應儘量減少同一文字的多個副本連結到不同位置的情況。這可能會給螢幕閱讀器使用者帶來問題,他們通常會脫離上下文列出連結——多個都標有“點選這裡”、“點選這裡”、“點選這裡”的連結會讓人困惑。
2.4.10 章節標題 (AAA)

除了建立有用的文件結構外,標題還應準確描述內容區域並將其劃分為邏輯部分。

請注意,此標準指的是一般網頁內容中的標題(例如,文字內容中的標題)。使用者介面的標題是一個特殊情況,涵蓋在標準 4.1.2 中。

請參閱標題和段落的基礎知識

2.4.11 焦點不被遮擋(最低) (AA)

當用戶介面元件獲得鍵盤焦點時,該元件不會因包含作者建立的內容而被完全隱藏。

注意:如果介面的內容可以由使用者重新定位,則僅考慮使用者可移動內容的初始位置進行符合此標準的測試。此外,使用者開啟的內容可能會遮擋獲得焦點的元件。此外,如果使用者可以在不改變鍵盤焦點的情況下顯示聚焦元件,則帶有焦點的元件不被視為隱藏以進行符合性和測試目的。

請檢視理解焦點不被遮擋(最低)以瞭解更多關於此標準的資訊。

2.4.12 焦點不被遮擋(增強) (AAA)

遵循 2.4.11 的規則,但當用戶介面元件獲得焦點時,元件的任何部分都不能被作者建立的內容隱藏。如果介面可配置,則僅考慮使用者可移動內容的初始位置進行符合此標準的測試和滿足。

請檢視理解焦點不被遮擋(增強)(AAA 級別)以瞭解更多關於此標準的資訊。

2.4.13 焦點外觀 (AAA)

當鍵盤焦點指示器可見時,焦點指示器的區域應滿足以下所有條件

  • 必須至少與未聚焦元件或子元件的 2px 厚邊框區域一樣大,其中包括元件的內容、邊框和背景,不包括外部陰影或發光效果。
  • 聚焦和未聚焦狀態下相同畫素之間的對比度必須至少為 3:1

例外情況是

  • 焦點指示器由使用者確定,作者無法調整。
  • 焦點指示器和指示器的背景顏色未由作者修改。

請檢視理解焦點外觀(AAA 級別)以瞭解更多關於此標準的資訊。

指南 2.5 輸入模式:使使用者更容易透過除鍵盤以外的各種輸入操作功能

本指南下的符合性標準確保使用者能夠使用鍵盤或滑鼠以外的不同輸入方法(包括觸控式螢幕、語音、裝置運動或替代輸入裝置)與數字技術進行互動。

成功標準 如何符合標準 實用資源
2.5.1 指標手勢 (A) 所有可透過指標操作的功能都可以透過單點操作進行操作。不需要基於路徑或多點手勢來操作任何功能。存在例外情況。 理解指標手勢
2.5.2 指標取消 (A) 對於可以使用單指標操作的功能,以下至少一項為真:無按下事件、中止/撤消、向上反轉或必需。 理解指標取消
2.5.3 名稱中的標籤 (A) 對於每個包含可見文字標籤的使用者介面元件,請確保可訪問名稱與標籤中的可見文字匹配(或包含)。 理解名稱中的標籤
2.5.4 動作啟用 (A) 確保對於可透過 a) 裝置運動(如搖晃、傾斜)或 b) 裝置感測器(包括攝像頭)檢測到的使用者手勢觸發的功能,以下兩項都為真:1) 運動啟用可以停用,並且 2) 無需使用裝置運動或使用者手勢即可操作該功能。存在例外情況。 理解動作啟用
2.5.5 目標大小 (AAA) 可操作專案的觸控目標大小必須至少為 44 CSS 畫素寬和高。存在例外情況。 理解目標大小
2.5.6 併發輸入機制 (AAA) 確保人們在與數字內容互動時可以使用和切換不同的輸入模式,包括觸控式螢幕、鍵盤、滑鼠、語音命令或替代輸入裝置。存在一個重要的例外。 理解併發輸入機制
2.5.8 目標最小尺寸 (AA) 指標輸入的最小目標尺寸應為 24px 寬乘以 24px 高,以下區域除外
  • 間距:小於 24px x 24px 的目標位置應使得如果一個 24px 直徑的圓以每個目標的邊界框為中心,則這些圓不會與任何其他目標或另一個尺寸過小的目標的圓相交。
  • 等效:同一頁面上提供了達到相同功能並符合此標準的單獨控制元件。
  • 內聯:目標位於一行文字中,其大小受行高或周圍非目標文字的限制。
  • 使用者代理控制:目標的大小由使用者代理決定,並且未被作者修改。
  • 必要:目標的特定呈現形式對於所傳達的資訊是必要的或法律要求的。
檢視理解目標最小尺寸

另見