動きのあるWebサイトでprefers-reduced-motionに対応する

スクロールアニメーションや画面切り替えは、内容を分かりやすくする一方で、人によっては気分の悪さや集中しにくさにつながります。端末の「視差効果を減らす」設定をWebサイトへ反映する方法を整理します。

動きが苦手な人は端末側で設定している

OSには、画面の動きを減らす設定があります。WebサイトはCSSのprefers-reduced-motionを使い、その希望を検知できます。

W3Cは、操作によって始まるアニメーションを抑える方法の一つとして、このメディアクエリを紹介しています。スクロールに連動する大きな移動や、背景が奥行きを持って動く表現は、特に慎重に扱います。

減らしたいのは、情報理解に不要な大きな移動、回転、拡大縮小、視差効果です。状態変化を伝える短いフェードや、読み込み中であることを示す小さな動きまで一律に削除すると、かえって分かりにくくなる場合があります。

堅実なのは、最初に動かない状態を定義し、動きを減らす設定がない場合だけアニメーションを追加する方法です。

.feature {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .feature {
    animation: feature-in 600ms ease-out both;
  }
}

この方法なら、CSSが途中で読み込まれなかった場合も内容が非表示になりにくくなります。

自動再生動画、カルーセル、CanvasやJavaScriptで動かす演出は、CSSのアニメーション停止だけでは制御できない場合があります。JavaScript側でも設定を確認し、自動再生を開始しない、または停止ボタンを用意します。

装飾を止めても、予約状況や処理中を伝える本質的な状態表示は残します。停止したことでボタンが反応していないように見えないか確認します。

パソコンとスマートフォンの「動きを減らす」設定を有効にして、トップページ、メニュー、フォーム、モーダル、スライダーを確認します。ブラウザの開発者ツールで設定を模擬するだけでなく、実機でも操作します。

キーボード操作時にフォーカスが見えるか、動きを止めてもコンテンツが表示されるか、レイアウトが空白にならないかも確認します。

動きのあるデザインを全員へ同じように見せる必要はありません。静的な状態を基本にし、動きを許容する利用者へ演出を追加する設計なら、見た目とアクセシビリティを両立しやすくなります。