使用媒体查询实现无障碍

CSS 媒体查询 可用于帮助残障用户更好地体验您的网站。

减少运动

闪烁和闪光动画可能会给患有认知障碍（如注意力缺陷多动障碍 (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：交互中的动画）。

另请参阅