2.3.3 ユーザー操作で起きるアニメーションを無効にできる
適合レベル
AAA
※各レベルについては適合レベルとはをご覧ください
概要
ユーザーの操作(スクロールやクリックなど)によってモーションアニメーションが発生すると、ユーザーがめまい・吐き気・偏頭痛などを起こす可能性がある。 そのため、コンテンツの機能や内容に必要不可欠でない限り、ユーザーが無効にできるようにする。
2.2.2 動く、自動更新するコンテンツに配慮する も参照。 2.2.2では、自動で再生・更新されるコンテンツについて記載している。 2.3.3ではユーザーの操作に応じたアニメーションが対象となる。
モーションアニメーションとは
モーションアニメーションとは、動いているような錯覚や、スムーズに移動しているように感じさせるアニメーションのこと。例として、移動や拡大縮小、回転などがある。色、ぼかし、透明度の変化はモーションアニメーションには含まれない。必要不可欠なアニメーション
必要不可欠なアニメーションとは、ローディングアニメーションなど、それ自体が存在しないと機能しなくなるものを指す。詳細
達成方法
- ユーザーの操作で発生するアニメーションがある場合、アニメーションを消す・軽減できる設定を用意する(推奨)
- アニメーションなしのサイトに移動する選択肢を提供する
テスト・チェック方法
- ユーザーの操作で発生するアニメーションがある場合、アニメーションを消す・軽減できる設定を用意する
実装方法
悪い実装例
アニメーションを最少化する設定をしているユーザーに対しても、アニメーションが表示される。
良い実装例
prefers-reduced-motionを用いて、アニメーションを最少化する設定(「視差効果を減らす」など)をユーザーがしているか検出する。設定している場合はアニメーションを消す、または軽減するような実装をする。
※IEなど一部のブラウザでは利用できないものの、現時点でAmebaでは上記の実装方法を推奨する。
.animation {
transform: translate3d(0, 10px, 0);
}
@media (prefers-reduced-motion: reduce) {
.animation {
transform: translate3d(0, 0, 0);
}
}
BLOG of the year 2019 では通常、スクロールに応じて各コンテンツがパララックスで表示される。しかし、アニメーションを最少化する設定をしているユーザーに対しては(上記のような実装をしているため)アニメーションされない。