Webアニメーションは、操作の結果、状態の変化、画面内の関係を視覚的に伝える手段です。
一方、激しい点滅、視界を大きく横切る動き、予期しない自動再生は、発作、めまい、注意散漫、情報の見落としにつながることがあります。
アクセシブルな設計では、すべての動きを消すのではなく、必要な動きだけを残し、利用者が制御できるようにし、動きを減らしても同じ情報と機能を提供します。
基本から確認したい場合は、Webアクセシビリティの考え方と改善の進め方も参照してください。
アニメーションが利用の妨げになる場面
動きによる問題は一種類ではありません。
点滅による安全上のリスク、位置や大きさの変化による身体的な負担、自動切り替えによる理解や操作の難しさを分けて考えると、必要な対策を選びやすくなります。
| 画面上の現象 | 起こり得る問題 | 設計時の判断 |
|---|---|---|
| 短時間に繰り返す点滅 | 光に敏感な利用者の発作や体調不良を招くおそれがある | 速い点滅を避け、必要な場合は閃光の回数、明るさ、面積を検証する |
| 大きな移動、拡大縮小、視差効果 | めまいや吐き気を感じたり、内容に集中しにくくなったりすることがある | 動く距離と範囲を抑え、動きを減らす設定では静的な変化に置き換える |
| 自動再生や自動切り替え | 読み終える前に内容が変わり、現在位置や操作方法を見失いやすい | 自動再生を避けるか、一時停止、停止、再開の操作を提供する |
| 動きだけで示す状態変化 | 動きを見逃した利用者に結果が伝わらない | 文言、アイコン、状態表示など、動きに依存しない手段を併用する |
WCAG 2.2で確認する三つの成功基準
WCAG 2.2では、点滅、自動で動くコンテンツ、操作をきっかけに始まるモーションを別の成功基準で扱っています。
「アニメーション」という一語でまとめず、どの条件に当てはまるかを確認します。
| 成功基準 | 対象 | 実務での確認 |
|---|---|---|
| 2.3.1 3回の閃光、又は閾値以下（レベルA） | 1秒間に3回を超える閃光 | 閃光が規定の一般閃光閾値または赤色閃光閾値を下回る場合を除き、基準を満たさないため、速い点滅は避ける |
| 2.2.2 一時停止、停止、非表示（レベルA） | 自動で始まり、5秒を超えて続き、ほかの内容と並行して表示される動き | 動きが不可欠でない限り、一時停止、停止、非表示の操作を用意する |
| 2.3.3 インタラクションによるアニメーション（レベルAAA） | 利用者の操作によって始まるモーションアニメーション | 機能や情報に不可欠でない動きは無効にできるようにする |
成功基準2.3.1は、「1秒間に3回を超えたら条件を問わず禁止」という意味ではなく、閃光の明るさや面積に関する閾値も含みます。
ただし、制作現場で安全性を判断できない点滅は使わず、必要な映像や演出は検証用の手法やツールで確認するのが堅実です。
WCAGの版と適合レベルを含む全体像は、WCAG 2.2の変更点と実務上の読み方で確認できます。
実装前に決めること
動きの役割を言葉にする
アニメーションを加える前に、その動きが「操作結果のフィードバック」「画面内の関係の説明」「装飾」のどれに当たるかを決めます。
保存完了のような操作結果は、動きを減らした場合でも文言や状態表示で伝える必要があります。
背景の浮遊や視差効果のような装飾は、停止しても情報や機能が失われないため、動きを減らす設定では省けます。
時間だけで安全性を決めない
すべてのアニメーションに共通する最適な秒数はありません。
短い動きでも、移動距離が大きい、画面の広い範囲が動く、繰り返し続けるといった条件が重なると、負担になることがあります。
持続時間だけでなく、移動距離、拡大率、反復回数、画面に占める面積、開始の予測しやすさを合わせて確認します。
開始条件と停止方法を設計する
ページ表示直後の自動再生は、利用者が内容を読む前に始まります。
自動で動かす必要がなければ、ボタンなどの明示的な操作を開始条件にします。
ただし、クリックで始まる動きでも、操作に不可欠でないモーションは減らせるようにします。
実装条件の詳細は、WCAG 2.2の「インタラクションによるアニメーション」も参考になります。
prefers-reduced-motionを使ったCSS
prefers-reduced-motionは、利用者がOSやユーザーエージェントで「動きを減らす」設定を選んでいるかをCSSから確認するメディア特性です。
静的な表示を基本にし、動きを減らす希望が示されていない場合だけアニメーションを加えると、上書き漏れを減らせます。
.card {
transform: none;
}
@media (prefers-reduced-motion: no-preference) {
.card {
transition: transform 200ms ease;
}
.card:hover,
.card:focus-within {
transform: translateY(-0.25rem);
}
}
この例では、動きを減らす設定が有効な場合、カードの位置は変わりません。
既存サイトで通常時のアニメーションを先に定義している場合は、@media (prefers-reduced-motion: reduce)の中で対象コンポーネントを絞って無効化し、最終状態の内容が見えることを確認します。
* { animation: none !important; transition: none !important; }のように全要素へ一律指定すると、必要な状態表示まで意図せず変えるおそれがあるため、コンポーネント単位で扱います。
W3Cは、prefers-reduced-motionでモーションを抑えるCSS手法を成功基準2.3.3の達成方法の一つとして示しています。
カルーセルを手動操作にする例
自動で切り替わるカルーセルは、読み終える前に内容が変わり、動きに注意を奪われることがあります。
自動再生を使わず、前後の移動をボタンで行う構成にすると、利用者が読む速さを決められます。
<section class="carousel" aria-label="注目記事">
<div class="carousel-item">
<!-- 現在表示している内容 -->
</div>
<div class="carousel-controls">
<button type="button" class="prev">前のスライド</button>
<button type="button" class="next">次のスライド</button>
</div>
<p class="carousel-status" aria-live="polite" aria-atomic="true">
1 / 3
</p>
</section>
このHTMLだけでカルーセルが完成するわけではありません。
JavaScript側では、表示項目、現在位置の文言、必要に応じたボタンの無効状態を同期し、キーボード操作後もフォーカスを予測できる位置に保ちます。
aria-liveは更新された現在位置を穏やかに通知するための領域に限定し、カルーセル全体へ付けて不要な読み上げを増やさないようにします。
読み上げの設計は、スクリーンリーダーとライブリージョンの実装ガイドで詳しく確認できます。
公開前の確認項目
- 動きの目的を説明でき、装飾だけの動きを減らしている
- 動きを停止しても、同じ情報と機能を利用できる
- OSの「動きを減らす」設定を有効にして表示を確認した
- 自動で続く動きに、一時停止、停止、非表示の手段がある
- キーボードだけで開始、停止、前後移動を操作できる
- 現在位置や処理結果を、動きだけに頼らず文言や状態で伝えている
- 速い点滅を避け、使用が避けられない場合は閃光の閾値を検証した
- 画面幅や拡大率を変えても、動く範囲と操作部品を把握できる
動きを残すための設計判断
アクセシビリティ対応は、アニメーションを一律に禁止する作業ではありません。
動きの目的を絞り、利用者の設定を尊重し、停止や代替表示を用意することで、情報を伝える効果と利用しやすさを両立できます。
実装後は通常表示だけで終えず、動きを減らす設定、キーボード操作、読み上げ環境を含めて確認してください。