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

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

意図

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

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

注記

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

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

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

メリット

事例

関連リソース

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

達成方法

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

十分な達成方法

重要な用語

必要不可欠 (essential)

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

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

動いているような錯覚を作り出す、又は滑らかに遷移しているような感覚を与えるための、状態間へのステップの追加。

例えば、出現する間に特定の位置に移動する、又はサイズが変化する要素は、アニメーションであるとみなされる。遷移せずに即座に出現する要素は、アニメーションが使用されていない。要素の見た目のサイズ、形状、又は位置の変化が生じない、色、ぼかし、又は不透明度の変化は、モーションアニメーションには含まれない。


訳注: このページは、2022 年 9 月 2 日版の Understanding WCAG 2.1 の翻訳です。2020 年 9 月 2 日版の原文は WAIC の管理するレポジトリから入手可能です。