State of CSS 2024 にあったprefers-reduced-motionについて調べた
prefers-reduced-motionは前庭運動障害などがある人たちのための機能
前庭運動障害とは、平衡感覚や身体のバランスを保つために重要な役割を果たす前庭系に影響を及ぼす障害を指す
これにはめまい、ふらつき、動いていないのに動いていると感じる感覚（浮動感）などが含まれる
この前庭運動障害を持つ人々は、特定のデザインや環境で悪化することがあり、アクセシビリティの観点から以下のような点に注意が必要である
- 動的コンテンツ: 画面の急激な動きや点滅、スクロールアニメーションは症状を悪化させることがある
- パララックス効果: 背景と前景が異なる速度でスクロールするデザインは不快感を引き起こす可能性が高い
このことから、各デバイスのシステム設定には、ユーザーがアニメーションや動きを無効にできるようにすることができるようになっている
この設定をしていることをCSSで検知する仕組みが、prefers-reduced-motionである
例えば、以下のように使用する
@media (prefers-reduced-motion: reduce) { .animation { animation-name: dissolve; } }
これにより、アクセシビリティ設定で Reduce Motion を有効にしている場合、このアニメーションは前庭運動に影響のないシンプルなディゾルブにトーンダウンされる
共通のスタイル
Reduce Motion を有効にしている場合
WCAG2.1にも記述されている対策で、アニメーションを多用しているサイトは考慮した方が良さそう
