通過周到的計劃和執(zhí)行，可以創(chuàng)建可訪問的Web動畫。關(guān)注用戶體驗（UX）和易用性的戰(zhàn)略設計選擇至關(guān)重要。 Web內(nèi)容可訪問性指南（WCAG）為可訪問的動畫提供了戰(zhàn)術(shù)指南。盡管實現(xiàn)細節(jié)因上下文而異，但WCAG提供了有關(guān)暫停/播放控件，閃爍限制和減少運動選項的建議。規(guī)范（版本2.1）提供了更新的，有價值的見解，用于設計可訪問的Web動畫。

讓我們檢查關(guān)鍵的WCAG建議：

暫停，停下來，隱藏

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

實施暫停，停止，隱藏

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

三個閃光或低于閾值

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

達到三個閃光閾值

避免閃爍超過每秒3次是最安全的方法。雖然風格選擇可能包含閃爍（例如，復古游戲美學），但超過此限制會帶來可訪問性風險。如果不可避免，請?zhí)峁└呒壘婧吞娲缘姆撬⑿掳姹尽?WCAG提供詳細的安全閃光閾值。

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

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

互動中的動畫

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

實施減少的運動選項

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

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

在CSS中使用prefers-reduced-motion ：

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

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

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

結(jié)論

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

以上是可訪問的Web動畫：動畫上的WCAG解釋了的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！