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

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

暫停，停下來(lái)，隱藏

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

實(shí)施暫停，停止，隱藏

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

三個(gè)閃光或低于閾值

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

達(dá)到三個(gè)閃光閾值

避免閃爍超過(guò)每秒3次是最安全的方法。雖然風(fēng)格選擇可能包含閃爍（例如，復(fù)古游戲美學(xué)），但超過(guò)此限制會(huì)帶來(lái)可訪問(wèn)性風(fēng)險(xiǎn)。如果不可避免，請(qǐng)?zhí)峁└呒?jí)警告和替代性的非刷新版本。 WCAG提供詳細(xì)的安全閃光閾值。

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

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

互動(dòng)中的動(dòng)畫

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

實(shí)施減少的運(yùn)動(dòng)選項(xiàng)

要解決運(yùn)動(dòng)敏感性，請(qǐng)考慮：

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

在CSS中使用prefers-reduced-motion ：

 / *彈跳動(dòng)畫 */
H2 {
  動(dòng)畫：彈跳1.5s線性無(wú)限替代；
}

/ *減少運(yùn)動(dòng)替代方案 */
@Media（預(yù)先減少的動(dòng)作：降低）{
  H2 {
    動(dòng)畫：淡入0.5s的淡入液；
  }
}

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

結(jié)論

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

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