達成基準 2.3.3: インタラクションによるアニメーションを理解する

達成基準 2.3.3 インタラクションによるアニメーション (レベル AAA): アニメーションが、機能又は伝達されている情報に必要不可欠でない限り、インタラクションによって引き起こされるモーションアニメーションを無効にできる。

意図

この達成基準の意図は、アニメーションがウェブページに表示されるのを利用者が防止できるようにすることである。一部の利用者は、動きのあるコンテンツから、注意散漫又は吐き気を経験することがある。例えば、ページのスクロールによって要素が動く (スクロールに伴う必要不可欠な動きを除く) と、前庭障害が発生する可能性がある。前庭 (内耳) 障害の反応には、めまい、吐き気、頭痛などがある。必要不可欠ではないことが多いアニメーションの一つは、スクロールによるパララックス (視差効果) である。スクロールによるパララックスは、背景が前景とは異なる速度で動くと発生する。この達成基準では、ウェブページの機能や情報に必要不可欠なアニメーションは許容される。

「インタラクションによるアニメーション」は、利用者の操作によって必要不可欠でないアニメーションが開始されたときに適用される。一方、達成基準 2.2.2 一時停止、停止、非表示は、ウェブページがアニメーションを開始するときに適用される。

注記

アニメーションが前庭障害の人に与える影響は非常に深刻なことがある。誘発される反応には吐き気や片頭痛が含まれ、回復のためにベッド上での安静が必要となる。

ウェブサイトはどのようにして前庭障害を引き起こす可能性を減らすことができるか? 次のいずれかの解決策を選択する。不要なアニメーションは使用しない。インタラクションから必要不可欠でないアニメーションを無効にするためのコントロールを利用者に提供する。ユーザエージェント又はオペレーティングシステムのモーション軽減機能を利用する。

利用者がページをスクロールすることによって引き起こされる動きについてはどうか? 新しいコンテンツをビューポート内に移動させることは、スクロールにおける必要不可欠な動きである。利用者は必要不可欠なスクロールの動きを制御しているので、これは許容される。必要不可欠なアニメーションだけを、適切な方法でスクロールのインタラクションに追加すること。不要な動きは、利用者が常に無効にできるようにすること。

メリット

事例

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

達成方法

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

重要な用語

必要不可欠 (essential)

もし取り除いてしまうと、コンテンツの情報あるいは機能を根本的に変えてしまい、かつ、適合する他の方法では情報及び機能を実現できない。

モーションアニメーション (motion animation)

New

動いているような錯覚やスムーズに移動しているように感じさせるために作る、状態と状態の間にステップを加えること。

例えば、別の場所に移動したりサイズが変わる要素はアニメーションしていると考えられる。推移せずに即座に表示される要素は、アニメーションを用いていない。モーションアニメーションには、色、ぼかし又は不透明度の変更は含まれない。