動畫與動態

您是否曾搭乘汽車、船隻或飛機，突然突然進入世界？ 旋轉？或者，如果手機或平板電腦上的動畫 看起來很糟 「開心」突然就讓你生病了？或者，你或許一直 對所有運動類型敏感？這些都是不同類型的文字 不容小覷

到了 40 歲，超過 35% 的成年人會有某種形式 這可能會導致暫時性的咒語、偏頭痛引起的脊椎動物等等 永久的子性身心障礙

除了觸發頂點以外，許多人還會發現移動、閃爍或捲動頁面 會造成乾擾的內容共用對象 ADHD 廣告動畫如果會幹擾觀眾注意力 元素就會忘記他們前往網站或應用程式的原因 第一名。

在本單元中，我們會介紹一些方式，說明如何為他人提供更優質的支援服務 以及各種類型的運動造成失調

閃爍及移動內容

建立動畫和動作時，請自問該元素的移動是否過大。舉例來說，畫面中的色彩從深色到淺色或快速移動，可能會導致光敏感性癲癇患者加上癲癇。根據估計，3% 的癲癇症患者是受光敏感度影響，而在女性和年輕族群中更常見。

WCAG 的刷新規範建議避免以下做法：

• 在一秒內閃爍超過三次
• 閃爍在 一般的閃光燈和紅色閃光燈門檻。

這些閃光效果最好能幹擾網頁使用， 導致疾病

因此，針對任何極端動作測試時務必使用 光敏感 Epilepsy Analysis Tool (PEAT)。 PEAT 是一項可以識別畫面內容、影片或動畫的免費工具 很容易引起癲癇並非所有內容都須經過 PEAT 評估。 但內容含有淺色和深色畫面的閃爍或快速轉換效果 為了安全起見，請評估背景顏色

您也該問自己有關動畫和動作的另一個問題，就是元素的動作是否對於理解畫面上的內容或動作至關重要。如果非必要，請考慮從您的建構或設計元素中移除所有移動，包括微動移動。

假設你認為元素的動作並不重要，但能強化 否則就無法移除其他移動操作 原因。在此情況下，建議您遵循 WCAG 的 運動指南。 相關規範載明，您必須建立讓使用者暫停、停止或 隱藏移動元素：非必要的移動、閃爍或捲動元素， 自動開始播放、持續超過 5 秒，並包含在其他網頁中 元素。

暫停、停止或隱藏動作

新增暫停、停止或隱藏 的機制，讓使用者可以關閉 動態動畫。您可以在畫面層級或元素層級執行這項操作。

舉例來說，假設你的數位產品內含許多動畫。 建議您新增可存取的 JavaScript 切換鈕 讓使用者掌控自己的使用體驗切換完成後 「動作關閉」所有動畫都會凍結在該畫面上或所有其他動畫。

使用媒體查詢

除了精心挑選動畫外，使用者還能選擇不同選項 如要暫停、停止、隱藏動作，以及避免無限循環動畫，你可以 另外也可以考慮新增以動作為主的媒體查詢。如此一來 讓使用者更有選擇

@prefers-reduced-motion

@prefers-reduced-motion 媒體查詢與顏色模組中聚焦於色彩的媒體查詢類似，會檢查與動畫相關的使用者 OS 設定。

使用者可調整顯示偏好設定來減少動作。這些設定屬於 不同作業系統間的互動，可能呈現正面或負面的框架。 使用 @prefers-reduced-motion 設計網站 由系統遵循這些偏好設定

在 MacOS 和 Android 上，使用者開啟這項設定可減少動作。使用 MacOS， 使用者可在 [設定] > [減少動態畫面] 中調整設定無障礙功能 >多媒體廣告。 Android 的設定為「移除動畫」。Windows 採用框架設定 預設為開啟「顯示動畫」。使用者必須切換 關閉這項設定可減少動作

或者，如下一組範例所示，您可以將所有動畫編碼，讓所有動畫在 5 秒內停止移動，而不必在無限迴圈中播放。

漸進增強運動

身為設計人員和開發人員，我們有大量的選擇，包括預設動作狀態和要顯示的動作大小。讓我們再看看最後一個動作範例。

假設我們要判斷動畫是否不需要讓使用者理解畫面內容。在這種情況下，可以選擇將預設狀態設為縮短的動態動畫，而非完整動態版本。除非使用者特別要求播放動畫，否則動畫會關閉。

我們無法預測哪些運動程度會使 癲癇、階級及其他視覺障礙即使只經過少量動作 螢幕上可能會觸發暈眩、視力模糊或惡化。現在，在 在這個範例中，我們預設為不顯示動畫

分層媒體查詢

您可以使用多項媒體查詢，為使用者提供更多選擇。我們 使用 @prefers-color-scheme、@prefers-contrast 和 @prefers-reduced-motion 。

允許使用者選擇

儘管將動畫融入數位產品中，營造令人愉悅的體驗，雖然很有趣 請務必記住，有些人會受到這些設計影響。 動作感光度會影響所有人，包括感覺自己有點不舒服 消化疾病或癲癇症患者

您可以使用多種不同的工具，讓使用者決定最好的服務。 而不是猜測他們現在的動作太多了舉例來說，您可以將 開啟或關閉網站或應用程式中的動畫。您可以考慮使用 將這種切換鈕預設為「關閉」。

隨堂測驗

測試你對動作和動畫無障礙功能的瞭解。