2.2.2 一時停止、停止、非表示

要件

以下の条件すべてに該当する動的なコンテンツに対して、一時停止、停止、または非表示にする手段を提供する必要があります

• 自動的に開始される
• 5秒を超えて継続する
• 並行して他のコンテンツと一緒に表示されている（主に視覚的に）

対象となるコンテンツ例

コンテンツタイプ	具体例
自動スクロール	ニュースティッカー、株価テロップなど
点滅・点灯	Flashバナー、セールの強調アニメ
スライドショー	カルーセルバナー、自動切替ギャラリー
自動再生動画	音が出るもの、静止せず動き続けるもの

必要な対応

対応方法	内容
一時停止	一時的に動作を止められる
停止	完全に動作を止められる
非表示	ユーザーが動く要素自体を消せる選択肢

上記いずれかの方法でユーザーに制御手段を提供すれば、要件は満たされます。

チェックポイント

• 動きが自動で開始され、5秒以上続くか？
• 停止・一時停止・非表示のUIが提供されているか？
• ユーザーが動きを制御できる明確なボタンや設定があるか？

利点

• 読みやすさが向上（動きが気を散らさない）
• 認知障害・学習障害・注意欠陥のある方も安心
• 自動操作に驚かされることなく自分のペースで利用できる

実装のヒント

• スライダーに「⏸ 停止ボタン」を明示的に表示
• CSSアニメーションに「prefers-reduced-motion」を尊重
• アクセシビリティ設定に「動きを減らす」機能を連動

@media (prefers-reduced-motion: reduce) {
  .auto-scroll, .slider {
    animation: none;
    transition: none;
  }
}

一覧に戻る