跳到主要內容
  • 字級
:::|

DC2動態內容控制

規則識別碼

DC2

規則名稱

動態內容控制

規則類型

原子規則

規則說明

更新媒體或動畫內容必須具有暫停,停止或隱藏控件。

無障礙要求對應

網站無障礙規範

  • 2.2.2暫停、停止和隱藏 (檢測等級A)
    • 必須符合 WCAG 2.0和WCAG 2.1 A級或更高級別
    • 結果對應:
      • 任何失敗結果:不符合
      • 所有成功結果:需進一步測試
      • 未適用結果:需進一步測試

適用性

適用於動態內容。

期望

以下檢查均正確:

  • 當螢幕包含動態更新、移動、閃爍的滾動內容或動畫時,可以使用一種方法來停止、隱藏、暫停或控制內容。
  • 該方法可讓輔助技術使用。
  • 裝飾內容動畫的持續時間不超過五秒鐘。

假設條件

  • 內容的自動更新非具必需性,它被列為成功準則2.2.2:暫停、停止、隱藏的有效例外。當內容的自動更新具必要性,此規則可能會產生不正確的結果。
  • 自動更新的內容是提供資訊。如果自動更新的內容不是提供資訊(例如,一個ASCII呈現的旋轉圖示,不提供有關流程結束時間或完成進度的訊息),則規則可能會失敗,但仍可能滿足成功準則。
  • 測試目標所屬的HTML文檔的內容將啟用任何內容更改,不考慮源自任何其他來源的更改(例如,瀏覽器快捷方式、瀏覽器擴充元件、瀏覽器設置、使用者代理、外部瀏覽器應用程序)。
  • 使用者代理將所有使用者操作都傳輸到HTML文檔。如果有其他事件源是由使用者操作引起的,則此規則可能會失敗,但仍可能滿足成功準則。
  • 控制內容更改的可用機制取決於是否啟用,如果還有其他不依賴於啟用的機制,則規則可能會失敗,但仍可能滿足成功準則。
  • 如果還有其他方法可以控制自動更改的內容,而這些方法不需要使用者與網頁進行互動,則此規則失敗,可能不是成功準則的失敗。
  • 此規則不會檢查暫停工具是否不會佔用使用者焦點。如果發生這種情況,則可能會通過此規則,但不會滿足成功準則。

無障礙支援

此規則沒有已知的主要無障礙功能支援問題。

測試案例:

作業系統

iOS

Android

HTML

範例說明

原生iOS媒體播放器預設提供停止視訊與音訊內容的控件。對於自定義螢幕上的動畫,如新聞報導收錄器與自動輪播,應隨同上一個與下一個按鈕提供停止按鈕。

使用原生 VideoView(用於視訊內容)與 MediaController(用於控制播放)用於如影片的媒體內容。對於自定義螢幕上的動畫,如新聞報導收錄器與自動輪播,應隨同上一個與下一個按鈕提供停止按鈕。

使用HTML5 video元素用於如影片的媒體內容。確保提供controls屬性用於控制播放,或使用具有無障礙控件的媒體播放器。對於自定義螢幕上的動畫,如新聞報導收錄器與自動輪播,應隨同上一個與下一個按鈕提供停止按鈕。

成功範例原始碼

新聞報導自動收錄器,每10秒更新當前顯示的新聞報導。

提供停止/暫停按鈕,以及下一個和上一個故事按鈕。

新聞報導自動收錄器,每10秒更新當前顯示的新聞報導。

提供停止/暫停按鈕,以及下一個和上一個故事按鈕。

<h2>Story headline</h2>

<div>Story content</div>

<div><button style="float:left;">Prior story</button>

<button style="float:left;">Pause</button>

<button style="float:left;">Next story</button></div>

失敗範例原始碼

新聞報導自動收錄器,每10秒更新當前顯示的新聞報導。

沒有提供按鈕來控制故事的更改。

新聞報導自動收錄器,每10秒更新當前顯示的新聞報導。

沒有提供按鈕來控制故事的更改。

<h2>Story headline</h2>

<div>Story content</div>

測試程序

  1. 啟動應用程式。
  2. 確定螢幕上是否包含動態更新、移動、閃爍的滾動內容或動畫。
  3. 確定是否具有停止、隱藏、暫停或控制內容的控件。
  4. 驗證控件是否以指定的方式正確控制媒體。
  5. 驗證可以通過輔助技術使用控件,並且可以使用輔助技術控制動態內容。
  6. 驗證裝飾性動畫內容的持續時間不超過五秒鐘。

參考詞彙:無

變更記錄:20200817-第1次編撰。

參考資源:

  1. Controlling media, 2019/2017 BBC行動裝置無障礙指南(MOBILE ACCESSIBILITY GUIDELINES)。
  2. G4: Allowing the content to be paused and restarted from where it was paused, Techniques for WCAG 2.0。