減少動態效果
閃爍和閃動的動畫對於患有注意力缺陷多動症 (ADHD) 等認知問題的人來說可能存在問題。此外,某些型別的運動可能會觸發前庭疾病、癲癇、偏頭痛和視網膜感光敏感症。根據使用者的偏好減少動畫或完全關閉動畫也可以使電量不足或低端裝置的使用者受益。
prefers-reduced-motion 媒體查詢允許為已將其作業系統輔助功能偏好設定為減少動態效果的使用者提供較少動畫和過渡的體驗。它有兩個可能的值:
no-preference-
表示使用者未向系統表明任何偏好。
reduce-
表示使用者已通知系統,他們偏好將運動量或動畫量降至最低的介面,最好是移除所有非必要的運動。
示例
除非你在你的輔助功能偏好設定中開啟“減少動態效果”,否則此示例將顯示煩人的動畫。
HTML
html
<div class="animation">animated box</div>
CSS
css
.animation {
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}
prefers-reduced-motion 的值是 reduce,而不是“none”。此偏好並不意味著必須移除所有動畫,這可以透過 * {animation: none !important;} 實現。相反,使用者希望停用動態動畫,包括那些由使用者互動觸發的動畫,除非動畫對於功能或所傳達的資訊至關重要(請參閱WCAG:來自互動的動畫)。