この記事の目次 開く・閉じる
今回の仕上がり
作例の球は左右へ往復します。「動きを止める」で停止し、表示が「停止中」へ変わりました。「動きを再開する」で再生状態へ戻ることも確認しています。静止画は停止後の実画面です。動く仕上がりは、下の埋め込みでそのまま操作できます。
下の画面は、実際に触れる作例です。静止画で動きを再現したものではありません。
作例を別画面で開く → · サンプル一式をダウンロード（ZIP）
必要なものと、試す順番
ブラウザで試せます。音や点滅はありません。OSで「動きを減らす」が有効な場合、作例は停止を維持するため、再開ボタンを押しても動きません。無理に設定を切る必要はありません。
- 作例を開きます。動きを減らす設定が無効なら、球が左から右へゆっくり移動します。
- 「動きを止める」を押し、球の位置と「停止中」の表示を見ます。
- Tabで別のリンクへ移動しても、動きが再開しないか確認します。停止するためにカーソルを置き続ける必要はありません。
- 「動きを再開する」を押すと、停止した位置から動きます。設定によって停止を維持する場合は、その理由が文章で表示されます。
仕組みを知る
動きに合わせて読み続ける必要はない
自動で始まり、5秒を超えて続き、ほかの内容と並行して表示される動きには、WCAG 2.2の達成基準2.2.2で停止などの仕組みが求められます。動きが活動に不可欠な場合の例外もあります。すべての短い演出へ同じ条件がそのまま当てはまるわけではありません。
W3Cの解説では、フォーカスを置いている間だけ止まり、移動すると再開する方法では、ページを使いながら停止できない問題も説明されています。今回は押した状態を保持するボタンにしました。詳しい条件は末尾の公式資料で確認できます。
停止ボタンとOS設定、二つの入口を用意する
CSSのanimation-play-state: pausedなら、その位置で止められます。JavaScriptでは停止状態とボタンの文言を一緒に更新し、何を押せば再開できるのかを示します。球は飾りなのでaria-hiddenにし、重要な文章は動かしません。
prefers-reduced-motionでは、動きを減らしたいという環境側の設定を参照できます。作例はCSSでも初期停止を指定し、JavaScriptで設定変更も見ています。ただし、この対応一つでサイト全体のアクセシビリティ適合を保証できるわけではありません。
コードの要点
.planet.paused {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.planet { animation-play-state: paused; }
}
button.setAttribute("aria-pressed", String(paused));
button.textContent = paused ? "動きを再開する" : "動きを止める";抜粋のplanetは動く要素、buttonとpausedはボタンと停止状態です。APNGや動画にこのCSSを付けても同じようには止まりません。媒体ごとに静止画への切り替えや動画のpause処理が必要です。
自作のHTML・CSS・JavaScriptはCC0です。ZIP内のREADMEと、共通のサンプル利用条件をご確認ください。
できたかの確認と、よくあるつまずき
- 停止した後に別の場所を選んでも、停止中のままになる。
- 再開で球が動き、ボタンと状態表示も切り替わる。
- 動きを減らす設定が有効なら、理由を表示して停止を維持する。
ここに注意。動く画像を隠しても、同じ場所の別の演出が動き続けると読みづらさが残ります。停止の対象を明確にしましょう。
ここに注意。この記事の文字PVは別の動画です。作例の停止ボタンが、記事全体の演出まで止めるわけではありません。
出典と、確認した範囲
作例の確認日：2026年10月3日。個別の条件と未確認範囲は以下の通りです。共通の検証方法も公開しています。
通常設定でCSSアニメの停止・再開をブラウザで確認しました。OS設定を切り替えた実機確認、利用者テスト、WCAG全項目の評価は未実施です。
W3C：Pause, Stop, Hide — 自動で続く動きに関する条件と、停止操作の考え方。
W3C：CSS technique C39 — prefers-reduced-motionで動きを抑える方法。