可操作性

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

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

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

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

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

使用鍵盤進入某個功能部分時,您應該能夠使用鍵盤退出該部分。例如,如果您在聚焦的按鈕上按下 Enter/Return 以開啟選項視窗,則您應該能夠再次關閉該視窗並使用鍵盤返回到主要內容。

這非常重要,這樣鍵盤使用者就不會被應用程式的特定部分困住。

2.1.3 鍵盤 — 所有功能 (AAA) 這是 2.1.1 標準的進一步步驟。要實現 AAA 符合性,所有功能都應可以使用鍵盤控制元件訪問 — 無任何例外。 請參閱 UI 控制元件重新構建鍵盤可訪問性
2.1.4 字元鍵快捷方式 (A) 在 2.1 中新增 如果存在單個字元鍵快捷方式,則至少滿足以下條件之一:可以關閉單個字元鍵快捷方式、重新對映或僅在相關使用者介面元件處於焦點時啟用。 瞭解字元鍵快捷方式

注意:另請參閱 WCAG 對 指南 2.1 鍵盤可訪問:使所有功能都可透過鍵盤訪問 的描述。

指南 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) WCAG 2.1 中新增

如果發生超時(由使用者不活動引起),請在流程開始時警告使用者,以免他們對超時存在感到意外(或者僅允許在 20 小時不活動後發生超時)。

理解超時

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

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

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

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

本指南下的符合性標準與使用者可以預期如何定位自己以及在當前頁面或網站的其他頁面上查詢他們正在尋找的內容和功能的方式有關。

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

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

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

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

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

唯一的例外情況是頁面是流程中的一步,因此在邏輯上只應具有指向先前步驟和後續步驟的連結。

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

請參閱 UI 控制元件有意義的文字標籤標題和段落的基本知識<label> 元素

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

2.4.7 可聚焦元素的可見焦點 (AA) 當透過製表符鍵遍歷可聚焦元素(如連結或表單輸入)時,應有一個視覺指示器來顯示當前哪個元素具有焦點。這通常是預設情況下帶點的或藍色的輪廓(取決於瀏覽器、平臺等),但這可以透過 CSS 覆蓋。 請參閱 使用原生鍵盤輔助功能
2.4.8 站點中的位置 (AAA) 當位於複雜站點或一組步驟中的頁面上時,應向用戶提供其在站點中的位置指示器,例如麵包屑軌跡、站點地圖或文字,例如“表單第 2 頁,共 10 頁”。
2.4.9 連結目的(僅連結)(AAA) 此標準建立在 2.4.4 的基礎上,指出要符合 AAA,連結的目的/目標應僅從連結文字中確定,即使在脫節的情況下也是如此。 請參閱 有意義的文字標籤。另請注意,您應儘量減少同一文字的多個副本連結到不同位置的情況。這可能會導致螢幕閱讀器使用者出現問題,他們通常會無上下文地列出連結——幾個都標記為“點選此處”、“點選此處”、“點選此處”的連結會令人困惑。
2.4.10 節標題 (AAA)

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

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

另請參閱