Accessibility
Guidelines

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

参考文献