Widely available 全主要ブラウザで対応済み。アニメーションを使うサイトでは必ず対応すべき。
メディアクエリ Widely available

prefers-reduced-motion

OSの「視覚効果を減らす」設定を検出し、アニメーションやトランジションを制御できる。前庭障害やモーション酔いを起こしやすいユーザーに配慮したサイトを構築するために不可欠なメディアクエリ。reduce が設定されている場合にアニメーションを無効化または簡素化する。

アクセシビリティアニメーション

概要

OSの「視覚効果を減らす」設定を検出し、アニメーションやトランジションを制御できる。前庭障害やモーション酔いを起こしやすいユーザーに配慮したサイトを構築するために不可欠なメディアクエリ。reduce が設定されている場合にアニメーションを無効化または簡素化する。

対応ブラウザ

デスクトップ

Chrome 74+
Edge 79+
Safari 10.1+
Firefox 63+

モバイル

Chrome Android 74+
Safari iOS 10.3+
Firefox Android 64+

基本構文

CSS 
/* モーション軽減時はアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* モーション許容時のみアニメーションを適用 */
@media (prefers-reduced-motion: no-preference) {
  .hero {
    animation: fadeIn 0.6s ease-out;
  }
}

実務での使いどころ

  • アクセシブルなアニメーション

    パララックスやスクロール連動アニメーションを、モーション酔いしやすいユーザーに対して無効化する。

  • 段階的なアニメーション導入

    デフォルトはアニメーションなしにし、no-preference の場合のみアニメーションを追加する安全なアプローチ。

注意点

  • すべてのアニメーションを一律に無効化するのではなく、意味のあるアニメーション（進捗表示など）は残すことも検討する。

アクセシビリティ

  • WCAG 2.1 の達成基準 2.3.3（インタラクションによるアニメーション）への対応に直結する。
  • アニメーションを使うすべてのサイトで対応を推奨する。

参考リンク