prefers-reduced-motionの使い方｜利用者の設定に合わせて動きを減らす

装飾を減らしても状態を伝える情報は残す

W3Cの関連解説では、利用者の操作に伴う動きが、不快感や注意のそれなどにつながる場合があることを説明しています。演出を弱めるときも、何が起きたかを知らせる情報は残したいところです。

たとえば保存完了を大きな移動アニメーションだけで知らせていたなら、静かなテキスト表示でも状態がわかるようにする。これは設計上の提案です。すべての要素に同じCSSを強引に当てるより、動きの目的を一つずつ確認するほうが、機能を壊しにくくなります。

端末設定を切り替え、CSS以外の動きも確認

端末の設定を切り替え、ページ内の演出やスクロールに伴う動きがどう変わるかを確認します。CSS以外で制御しているアニメーションや動画などは、別の対応が必要になる場合もあります。

動きを減らしても操作完了が伝わるか点検

保存ボタンを押すと大きな動きが出る画面なら、動きを減らした設定でも、保存したことが文字で分かるかを確かめます。読み込み中、完了、エラーなどの状態を、アニメーション一つに任せないためです。

これは特定のCSSを全要素へ貼れば終わる作業ではありません。装飾的な動きと、操作状況を知らせる表示を分けて確認します。通常設定と動きを減らす設定の両方で、同じ目的の操作を終えられることを確かめましょう。