アクセシビリティのためのprefers-reduced-motion対応

prefers-reduced-motion

このメディア機能は、ユーザーがシステムレベルで不要なモーションを最小化する設定を有効にしているかを検出します。

誰に必要か？

前庭障害、動きへの過敏性、発作性障害のある人は、アニメーション、パララックス効果、自動再生動画によりめまい、吐き気、不快感を経験することがあります。

CSS実装

.hero {
  animation: slideIn 0.5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

削減すべきもの（削除ではなく）

• スライドアニメーションをフェードまたは即時表示に置き換え
• パララックスを静的背景に
• 自動再生カルーセルを一時停止（手動ナビゲーションは維持）
• バウンス/スピンローディングインジケーターを静的なものに

フレームワーク統合

Tailwind CSS:

<div class="motion-safe:animate-bounce motion-reduce:animate-none">
  Loading...
</div>