網頁不應該向關閉動畫的使用者顯示動畫。 動畫可以幫助提升產品的可用性，但也可能造成分心、混亂或噁心。
要檢查網頁在關閉 UI 動畫 (減少動態) 下，在 渲染 工具中使用 Emulate CSS 媒體功能偏好減少動態 下拉選單。
在 無障礙測試的示範網頁中，當你在作業系統中關閉動畫，或用 DevTools 模擬該設定時，當你選擇側邊欄導覽選單的連結時，網頁並不會使用平滑捲動。 這是透過在媒體查詢中包裝 CSS 平滑捲動設定，然後使用 Rendering 工具模擬作業系統設定來減少動畫效果來達成。
要檢查關閉動畫後頁面是否可用：
請在新視窗或分頁中開啟 無障礙測試示範網頁 。
在網頁任意位置右鍵點擊，然後選擇 檢查。 或者，按 F12。 DevTools 會在網頁旁邊開啟。
在 DevTools 的 活動欄中，選擇 「來源 」標籤。如果那個分頁看不到，請點擊 「更多工具 」
) 按鈕。在左側的 來源 工具 導覽 窗格中，選擇
styles.css。 CSS 檔案會出現在 編輯器 面板中。在 Windows/Linux 按 Ctrl+F ，或在 macOS 按 Command+F ，然後按 Enter
@media。 以下顯示 CSS 媒體查詢，確認網頁上確實使用該查詢：@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
模擬作業系統設定以減少動畫
要模擬作業系統設定以減少動畫：
按 Esc 鍵可開啟 DevTools 底部的 快速檢視 面板。 點擊快速檢視工具列上的「更多工具」 (
按鈕查看工具清單，然後選擇渲染。在 Emulate CSS 的媒體功能「偏好-減少動態」下拉選單中，選擇偏好-減少動態：減少。
在網頁中，點擊藍色選單項目，例如馬或羊駝。 現在網頁會立即捲動到選中的區塊，而不是使用平滑捲動的動畫。
在 渲染 工具中，在模擬 CSS 媒體功能偏好-減少動態下方，選擇 「無模擬 」以移除此設定。
請注意，即使使用上述媒體查詢與模擬設定，示範網頁仍會執行以下動畫。 在建置網站時，務必修正所有相似的動畫：
- 當你將滑鼠移到藍色選單項目上時，會看到動畫。
- 當你將滑鼠移到 「更多 」連結上時，圓圈的動畫。