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 では通常、スクロールに応じて各コンテンツがパララックスで表示される。しかし、アニメーションを最少化する設定をしているユーザーに対しては（上記のような実装をしているため）アニメーションされない。

参考文献

• 達成基準 2.3.3: インタラクションによるアニメーションを理解する
• UIデザインへのアプローチ Part 2: インタラクションとアニメーション（UXデザイン入門シリーズ）| アドビUX道場 #UXDojo
• prefers-reduced-motion - CSS: カスケーディングスタイルシート | MDN