動畫與動態

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

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

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

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

閃爍及移動內容

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

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

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

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

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

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

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

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

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

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

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

瀏覽器支援

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

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

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

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

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

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

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

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

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

我們可以建立的哪些要素能反映動作的作業系統設定？

@prefers-reduced-motion

當然可以！這項媒體查詢可讓你依據使用者的顯示設定，決定要使用的動作強度。這些設定在不同作業系統上會有所差異，因此除了這個媒體查詢之外，建議您也為動作選擇合適的動作。

JavaScript 切換鈕

答錯了。這種切換鈕可讓使用者在抵達您的網站後進行選擇，但無法讀取使用者的設定。