動きを減らす設定に応えるCSS：prefers-reduced-motionを小さく試そう

飾りのカードが揺れたり、ボタンが移動したりする演出は、利用者によって負担になることがある。OSなどに「動きを減らす」設定がある場合、CSSのprefers-reduced-motionでその希望に応えることができるよ。

この記事では、情報を伝えるためには不要な、小さなカードの往復移動を扱う。作例は最初から自動で動かさず、「再生する」を押したときだけ動かす。実装と確認を分けて見ていこう。

reduceのとき、装飾の移動を止める

.card {
  animation: drift 2s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(40px); }
}
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

メディアクエリーは、条件に応じてCSSを適用する仕組み。reduceは、動きを減らす設定を利用者が有効にしていることを示す。no-preferenceは減らす希望が通知されていない状態で、積極的にすべての演出を求めている、とまでは解釈しないでね。

上のコードは基本形。記事下の作例では、さらに再生ボタンを押すまではアニメーションを有効にせず、手動で停止するボタンも用意している。

まず手動の比較で変化を確かめる

1. 最初はカードが止まっていることを確認する。
2. 「再生する」を押す。端末が動きを減らす設定でなければ、カードが横に往復する。
3. 「作例で動きを減らす」をオンにすると、移動が止まる。
4. オフへ戻すと、端末側がreduceでない場合には再開する。
5. 「停止する」で止める。「最初から試す」で初期状態へ戻すこともできる。

手動の比較は、この作例内だけの状態で、OS設定を変更しない。端末がreduceを通知している場合は、比較スイッチをオフにしても移動を開始しないようにしているよ。

端末の設定への対応は、別に確認する

実際の設定への対応は、OSのアクセシビリティ設定や、ブラウザの開発者ツールのメディア機能エミュレーションで確認する。設定項目名は環境によって異なる。

作例では、ブラウザが通知する値も文章で表示する。編集部はChromiumでreduceとno-preferenceをエミュレートし、再生を指定してもreduceではanimation-name: noneになることを確認した。手動の比較ボタンだけが動いたから、OS設定対応も確認済み、と扱わないことが大切だよ。

何でも一括でゼロ秒にする前に

装飾的な移動は止めやすい一方、処理の完了や操作の結果を伝える表現は、別の静的な手掛かりが必要になることがある。すべてのアニメーションを一行で消して終わりにせず、各部品で何を伝えていたか確認しよう。

JavaScriptで動かす処理や動画が、このCSSだけですべて止まるわけではない。該当する処理側の対応も必要になる。また、この設定への対応だけでアクセシビリティ全体が完了するわけではないよ。

見た目の情報を残す考え方は、色以外でも状態を伝える作例にもつながる。動きと色をそれぞれ補助として使い、必要な情報を文字でも確認できるようにしよう。