可訪問的Web動畫：動畫上的WCAG解釋了

通過周到的計劃和執行，可以創建可訪問的Web動畫。關注用戶體驗（UX）和易用性的戰略設計選擇至關重要。 Web內容可訪問性指南（WCAG）為可訪問的動畫提供了戰術指南。儘管實現細節因上下文而異，但WCAG提供了有關暫停/播放控件，閃爍限制和減少運動選項的建議。規範（版本2.1）提供了更新的，有價值的見解，用於設計可訪問的Web動畫。

讓我們檢查關鍵的WCAG建議：

暫停，停下來，隱藏

該指南建議，自動開始移動，眨眼或滾動內容持續五秒鐘，與其他內容一起呈現，必須提供一種機制來暫停，停止或隱藏它。存在這種運動對活動必不可少的例外。這適用於諸如自動防空輪，動畫背景或循環插圖之類的情況，累積運動超過五秒鐘。

實施暫停，停止，隱藏

對於更長的動畫，請納入暫停/遊戲控件。 WCAG不規定控制設計；允許創意自由。示例包括用於循環動畫的播放/停止按鈕，或用於單播放動畫的重播按鈕，將無縫集成到設計中。循環動畫GIF還需要此類控件。裝載機和預加載器是本指南的例外。

三個閃光或低於閾值

該建議解決了屏幕閃爍的癲癇發作風險。指南指出：網頁不應包含每秒閃爍三次以上的閃光燈，也不應超過指定的閃光燈和紅色閃光閾值。

達到三個閃光閾值

避免閃爍超過每秒3次是最安全的方法。雖然風格選擇可能包含閃爍（例如，復古遊戲美學），但超過此限制會帶來可訪問性風險。如果不可避免，請提供高級警告和替代性的非刷新版本。 WCAG提供詳細的安全閃光閾值。

WCAG符合水平（A，AA，AAA）

WCAG定義了一致性級別：A（最小），AA（中級，需要A和AA合規性）和AAA（最高，需要A，AA和AAA合規性）。 AA級通常針對網站可訪問性。 “暫停，停止，隱藏”和“三個閃光燈”指南屬於AA。

互動中的動畫

該指南重點介紹了用戶互動觸發的動畫，表明：通過交互作用觸發的運動動畫應可以禁用，除非對功能或傳達信息必不可少。 “運動動畫”專門指的是動畫產生運動的幻覺，不包括顏色，模糊或不透明度變化。

實施減少的運動選項

要解決運動敏感性，請考慮：

• 避免不必要的動畫：評估動畫的上下文和適當性。
• 提供用戶控件：提供切換或設置以禁用非必需運動。
• 利用prefers-reduced-motion ：利用此媒體查詢來檢測和響應用戶OS級減少運動首選項，提供替代性，較少動作的動畫版本。這可以在CSS或JavaScript中實現。

在CSS中使用prefers-reduced-motion ：

 / *彈跳動畫 */
H2 {
  動畫：彈跳1.5s線性無限替代；
}

/ *減少運動替代方案 */
@Media（預先減少的動作：降低）{
  H2 {
    動畫：淡入0.5s的淡入液；
  }
}

結合自定義切換和prefers-reduced-motion為具有廣泛動畫的站點提供了強大的解決方案。

結論

通過遵守這些WCAG指南，您可以創建可訪問的Web動畫，確保更廣泛的受眾可以與您的網站有意義地互動。請記住，可訪問性超出了動畫範圍；探索整體方法的其他資源。

以上是可訪問的Web動畫：動畫上的WCAG解釋了的詳細內容。更多資訊請關注PHP中文網其他相關文章！