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

この規定の意味

WCAG 2.2.2（Pause, Stop, Hide）は、原則「操作可能」におけるレベルAの達成基準です。ページ上で自動的に動く、点滅する、スクロールする、または更新されるあらゆるコンテンツを対象とします。この規定は、コンテンツの挙動に応じて2つの異なる要件を定めています。

自動的に開始し、5秒を超えて継続し、他のコンテンツと並行して表示される、動く・点滅する・スクロールするコンテンツについては、ユーザーにそれを一時停止、停止、または非表示にするための仕組みを提供しなければなりません。これには、CSSアニメーション、JavaScriptで動作するカルーセル、マーキー（marquee）テキスト、点滅要素、スクロールするティッカー、アニメーションバナーが含まれます。

自動更新されるコンテンツ — ライブスコアボード、株価ティッカー、ソーシャルメディアフィード、一定間隔で更新されるニュース見出しなど — については、ユーザーが更新を一時停止、停止、非表示にするか、更新頻度を制御できなければなりません。

適合とみなされるには、明確に操作可能なコントロール（ボタン、キーボードショートカット、その他同様の仕組み）が、アニメーションコンテンツの前または横に用意されており、ユーザーが支援を必要とせずにそれを固定または除去できる必要があります。コントロール自体もアクセシブルでなければならず、キーボードで到達可能で、適切にラベル付けされ、マウスなしで使用できる必要があります。

不適合となるのは、次のいずれかが存在する場合です。停止できない<blink>要素やCSSのtext-decoration: blink、一時停止の仕組みがない<marquee>要素、無限に再生されるのに一時停止ボタンのないアニメーションカルーセル、制御できない自動更新ニュースウィジェット、停止手段のないループ再生の背景動画などです。

WCAGは2つの明示的な例外を定義しています。第一に、この規定は5秒以下で終了するアニメーションには適用されません。これは、自動的に終わる短時間の動きは持続的な注意散漫を引き起こさないためです。第二に、アニメーションがその活動にとって本質的な場合には適用されません。たとえば、リアルタイムの株取引インターフェースでは、ライブ価格がページの目的そのものであり、それを一時停止するとコンテンツの性質が根本的に変わってしまうようなケースです。これらの例外は範囲が狭く、実装を省略するための包括的な言い訳として用いるべきではありません。

なぜ重要か

動く・点滅するコンテンツは、複数の異なる障害当事者にとって重大な障壁となり、その影響は軽い注意散漫から、実際の医療的危害にまで及びます。

注意欠如・多動症（ADHD）やその他の認知障害のある人は、周辺視野にアニメーション要素が存在すると、ページの主要コンテンツに集中することが極めて困難になることがよくあります。人間の脳は、生存メカニズムとして動きに注意を向けるよう神経学的に配線されており、ADHDのある人は、定型発達のユーザーよりもはるかに強くこの引力を感じます。ニュースページの下部にあるスクロールティッカーや、サイドバーのアニメーションバナー広告は、メイン記事を事実上読めなくしてしまうことがあります。

前庭障害 — ラビリンス炎、良性発作性頭位めまい症（BPPV）、メニエール病など — のある人は、画面上の特定の種類の動きにさらされると、吐き気、めまい、方向感覚の喪失を経験することがあります。これらのユーザーにとって、ループするカルーセルやパララックススクロール効果は単に煩わしいだけではなく、ページから完全に離脱せざるを得ないほどの身体的不調を引き起こすことがあります。前庭障害は、米国だけでも40歳以上の成人の約35%に影響すると推定されています。

光感受性てんかんのある人は、特定の周波数で点滅・フラッシュするコンテンツによって発作のリスクにさらされます。フラッシュするコンテンツはWCAG 2.3.1でより直接的に扱われていますが、2.2.2で対象となる点滅コンテンツも発作を誘発しうる要因となり得ます。世界保健機関は、てんかんが世界で約5,000万人に影響していると推定しています。

スクリーンリーダーユーザーにとっても、自動更新コンテンツは同様に破壊的な問題を引き起こします。ライブリージョンが更新されると、スクリーンリーダーは新しいコンテンツを読み上げ、ユーザーが別のものを聞いている最中の文の途中で割り込んでしまいます。更新を一時停止する手段がなければ、ライブコンテンツを含むページの操作は極めて困難になります。

現実のシナリオを考えてみましょう。ADHDのあるユーザーが、トルコのECバンキングポータルでオンライン振込を行っています。ヘッダーには、3秒ごとに4つのオファーが切り替わる回転式プロモーションバナーがあります。ユーザーは正しい口座番号の入力に集中できません。転記ミスをして振込は失敗し、最初からやり直さなければならなくなります。もしバナーに一時停止ボタンが付いていれば、この作業は簡単だったはずです。これは仮定の話ではなく、アクセシビリティ監査人が日常的に遭遇する、実際に文書化されたインタラクション障害の一類型です。

障害当事者のアクセス確保にとどまらず、制御不能な動きを排除することは、すべての人にとってのユーザビリティを向上させ、認知負荷を軽減し、レイアウトシフトや不要なJavaScript実行を減らすことで、Core Web VitalsスコアなどのSEOシグナルを改善することにもつながります。

関連する Axe-core のルール

• blink: このルールは、非推奨の<blink>HTML要素の存在と、テキストを点滅させるCSSプロパティ（歴史的にはtext-decoration: blink）をチェックします。<blink>要素は、ユーザーが停止させるネイティブな仕組みなしに、テキストを継続的に点滅させます。Axeは、この要素のあらゆる使用を2.2.2に直接違反するものとしてフラグし、<blink>には適合する利用ケースが存在しないとみなします。また、このルールは、一時停止できないアニメーションを用いたCSSベースの点滅効果についても警告します。要素とプロパティはDOMおよび計算済みスタイル上で構文的に識別可能であるため、自動検出はここでは信頼性があります。
• marquee: このルールは、<marquee>HTML要素の存在をチェックします。これは、テキストやコンテンツを画面上で水平方向または垂直方向に連続ループでスクロールさせる要素です。<marquee>要素には、組み込みのアクセシブルな一時停止メカニズムがなく、HTML5では非推奨です。Axeは、そのあらゆる使用を違反としてフラグします。<blink>と同様に、この要素も構文的に識別可能であるため、検出は容易です。ただし、自動ツールでは2.2.2の違反をすべて検出することはできません。CSSアニメーション、JavaScriptカルーセル、自動更新するAJAXウィジェット、ループ再生のHTML5動画などは、停止メカニズムの有無が、インタラクティブな体験全体を評価する人間のテスターにしか判断できないため、すべて手動レビューが必要です。

テスト方法

1. axe DevTools または Lighthouse による自動スキャン: ページをChromeまたはFirefoxで開きます。DevTools（F12）を開き、axe DevToolsパネルまたはLighthouseのAccessibility監査に移動して、フルスキャンを実行します。結果の中で、blinkまたはmarqueeとしてタグ付けされた違反を特に探します。各違反には、DOMノード、影響レベル（seriousまたはcritical）、および是正ガイダンスへのリンクが含まれます。自動スキャンで問題が検出されなかったとしても、完全な適合を意味するわけではないことに注意し、手動ステップに進んでください。
2. CSSおよびJavaScriptアニメーションの手動確認: ページを目視で確認し、自動的に動く、スクロールする、点滅する、または更新されるコンテンツがないか探します。各インスタンスについて、一時停止・停止・非表示にするためのコントロールが、アニメーションコンテンツの前または横に存在し、視認できるかを確認します。コントロールにキーボードで到達できるか（Tabでフォーカスできるか）、EnterまたはSpaceキーでそれを起動できるかを検証します。コントロールを起動した際に、動きが単に遅くなるのではなく、実際に停止することも確認してください。
3. キーボードのみのテスト: マウスを外します。Tabキーを使ってページ全体をナビゲートします。すべてのアニメーション要素について、キーボードだけで一時停止・停止コントロールに到達できること、そしてそのコントロールに可視のフォーカスインジケーターがあることを確認します。コントロールに到達できない場合、または到達するために、まずアニメーションコンテンツ自体をTabで通過しなければならない場合（これは混乱を招き得ます）、それは不適合です。
4. NVDA と Firefox を用いたスクリーンリーダーテスト: NVDAを起動し、Firefoxでページを開き、読み上げ中に割り込むライブリージョンのアナウンスがないかを聞きます。自動更新コンテンツに移動し、一時停止コントロールを使用するとNVDAのアナウンスが止むことを確認します。同じ手順で、JAWSとChrome、macOS上のVoiceOverとSafariでもテストします。
5. 自動更新コンテンツの確認: タイマーで更新されるコンテンツ（ニュースフィード、ダッシュボード、スコアボードなど）について、更新間隔を確認します。更新を一時停止する、または頻度を制御する仕組みがあることを確認します。可能であれば更新を手動でトリガーし、スクリーンリーダーがユーザーが選択したときにのみ更新を読み上げ、意図しないタイミングでは読み上げないことを検証します。
6. 簡易動作（Reduce Motion）設定のテスト: OSのアクセシビリティ設定で「動きを減らす」設定を有効にします。ページを再読み込みし、アニメーションがprefers-reduced-motionCSSメディアクエリを尊重していることを確認します。これはWCAG 2.2.2の厳密な要件ではありませんが、強力な補完的テクニックであり、監査人から期待されることが増えています。

修正方法

非推奨の <marquee> 要素 — 不適切な例

<!-- 一時停止コントロールのないスクロールテキスト。2.2.2 に不適合 -->
<marquee behavior='scroll' direction='left'>
  Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
</marquee>

非推奨の <marquee> 要素 — 適切な例

<!-- prefers-reduced-motion を尊重し、
     アクセシブルな一時停止ボタンを含む CSS アニメーションに置き換えた例 -->
<div class='ticker-wrapper'>
  <button
    id='ticker-toggle'
    aria-label='Pause news ticker'
    aria-pressed='false'
    onclick='toggleTicker()'
  >
    Pause
  </button>
  <div class='ticker' id='news-ticker' aria-live='off' aria-atomic='false'>
    <p class='ticker-content'>
      Breaking news: Market closes up 2.4% — Inflation data released — Central bank holds rates
    </p>
  </div>
</div>

<!-- CSS では .ticker-content にアニメーションを定義し、
     animation-play-state: paused を設定する .paused クラスを用意します。
     JS の toggleTicker() 関数は .paused を付け外しし、
     aria-pressed と aria-label を適宜更新します。 -->

非推奨の <blink> 要素 — 不適切な例

<!-- blink 要素は止められない連続フラッシュを引き起こす。2.2.2 に不適合 -->
<p>Your session will expire soon. <blink>Please save your work!</blink></p>

非推奨の <blink> 要素 — 適切な例

<!-- スクリーンリーダー向けに role='alert' を付与した静的で高コントラストな警告。
     緊急性の伝達に点滅は不要。 -->
<p>
  Your session will expire soon.
  <strong role='alert'>Please save your work!</strong>
</p>

一時停止コントロールのない自動再生カルーセル — 不適切な例

<!-- 4 秒ごとに進むが停止手段のないカルーセル。2.2.2 に不適合 -->
<div class='carousel' data-autoplay='true' data-interval='4000'>
  <div class='slide active'><img src='promo1.jpg' alt='Summer Sale'></div>
  <div class='slide'><img src='promo2.jpg' alt='New Arrivals'></div>
  <div class='slide'><img src='promo3.jpg' alt='Free Shipping'></div>
</div>

一時停止コントロールのない自動再生カルーセル — 適切な例

<!-- カルーセルに可視でキーボード操作可能な一時停止ボタンを追加。
     aria-label は現在の状態を反映するよう動的に更新。
     フォーカス/ホバー時に自動再生を停止する（WCAG のベストプラクティス）。 -->
<div
  class='carousel'
  id='promo-carousel'
  aria-roledescription='carousel'
  aria-label='Promotional offers'
>
  <button
    id='carousel-pause'
    aria-label='Pause carousel'
    aria-pressed='false'
    class='carousel-pause-btn'
  >
    <!-- SVG の一時停止アイコンまたはテキストラベル -->
    Pause
  </button>
  <div
    class='carousel-track'
    aria-live='off'
  >
    <div
      class='slide active'
      role='group'
      aria-roledescription='slide'
      aria-label='1 of 3'
    >
      <img src='promo1.jpg' alt='Summer Sale — up to 50% off selected items'>
    </div>
    <div
      class='slide'
      role='group'
      aria-roledescription='slide'
      aria-label='2 of 3'
    >
      <img src='promo2.jpg' alt='New Arrivals — browse the latest collection'>
    </div>
  </div>
</div>

自動更新されるライブデータウィジェット — 不適切な例

<!-- ユーザー制御なしに JS で 10 秒ごとに更新されるウィジェット。2.2.2 に不適合 -->
<div id='stock-widget' aria-live='polite'>
  <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
</div>

自動更新されるライブデータウィジェット — 適切な例

<!-- ウィジェットに一時停止ボタンを追加。停止中は aria-live を 'off' に設定し、
     スクリーンリーダーが一時停止中に割り込まないようにする。 -->
<div class='stock-widget-container'>
  <button
    id='stock-pause'
    aria-label='Pause stock updates'
    aria-pressed='false'
  >
    Pause updates
  </button>
  <div id='stock-widget' aria-live='polite' aria-atomic='true'>
    <p>BIST 100: 9,842.15 <span class='change positive'>+1.3%</span></p>
  </div>
</div>
<!-- JS では aria-live を 'polite' と 'off' の間で切り替え、
     一時停止時には setInterval タイマーを停止し、
     ボタンの aria-pressed と aria-label を適宜更新します。 -->

よくある間違い

• 本番HTMLで、たとえ「レトロ」や装飾目的であっても<marquee>や<blink>要素を使用すること。これらはどちらも非推奨で意味論的な価値がなく、2.2.2に必ず違反し、削除以外に是正の道がありません。
• 一時停止ボタンをマウスホバー時にのみ表示し、Tabでナビゲートすることが多いキーボード専用ユーザー（最もこの機能を必要とする人たち）から事実上アクセス不能にしてしまうこと。
• DOM上でアニメーションコンテンツより前にTabで到達できない位置に一時停止ボタンを配置し、ユーザーが混乱を招く動きを止める前に、そのアニメーションコンテンツをナビゲートすることを強いること。
• CSSでanimation-play-state: pausedを用いて視覚的なアニメーションを停止しながら、コンテンツ更新を駆動しているJavaScriptのsetIntervalやrequestAnimationFrameループを無効化しないこと。見た目は止まっていてもDOMは変化し続け、スクリーンリーダーを中断し続けてしまいます。
• カルーセルやティッカーにaria-live='polite'を設定し、ユーザーが一時停止ボタンを押した後もそのままにしておくこと。視覚的なアニメーションは停止していても、ライブリージョンはDOMの変化をスクリーンリーダーユーザーに読み上げ続けてしまいます。
• <video>要素でautoplay=falseに頼り、ブラウザ間の挙動を検証しないこと。一部のブラウザやプラグインの組み合わせでは、この属性が上書きされ、制作者の意図やユーザーの期待に反して動画が自動再生されてしまうことがあります。
• 5秒の例外を一般的な猶予期間と誤解し、各スライドの表示時間が5秒未満であればよいと考えて、4秒ごとにスライドが切り替わるカルーセルを構築すること。アニメーション全体としては連続しており、5秒をはるかに超えて継続するため、この例外は適用されません。
• アニメーションを停止する一時停止コントロールを提供しながら、その停止状態を視覚的に示さず、ユーザーに自分の操作が有効だったかどうか不明なままにしてしまうこと。ボタンは現在の状態を反映し、理想的にはaria-pressedを用い、「Pause」と「Play」の間でラベルを更新する必要があります。
• prefers-reduced-motionをCSSトランジションにのみ適用し、CSSとは独立して動作するJavaScriptベースのアニメーションを無視すること。その結果、システムレベルで動きを減らす設定を有効にしているユーザーが、ページ上で依然として動きにさらされてしまいます。
• tabindex='-1'を設定したり、マウス操作でのみ表示されるdisplay:noneのコンテナ内に一時停止コントロールを配置したりして、キーボードのタブ順からコントロールを外してしまうこと。コントロールは常にキーボードナビゲーションで到達可能でなければなりません。

トルコのアクセシビリティ規制との関係

トルコの2025年大統領通達第2025/10号は、2025年6月21日付・官報（Resmî Gazete）第32933号で公布され、WCAG 2.2と整合したウェブおよびモバイルのアクセシビリティ要件を義務付けています。WCAG 2.2.2 Pause, Stop, HideはレベルAの基準であり、適合の最も基本的な階層に位置し、通達の対象となるすべての主体にとって例外なく義務となります。

通達は段階的な適合期限を定めています。公的機関・団体は、通達公布日から1年以内にレベルAの完全適合を達成しなければならず、民間部門の事業者は2年以内に達成しなければなりません。任意の参加制度ではなく、この通達は法的義務を課すものであり、適合していないデジタルプロパティは行政監督および執行措置の対象となり得ます。

通達の対象となる主体には、トルコのデジタルサービスの幅広い分野が含まれます。すべての公的機関・政府機関、トルコで事業を行うECプラットフォーム、銀行および金融サービス機関、病院および民間医療提供者、20万件以上の加入者を有する通信事業者、旅行代理店、民間輸送会社、国民教育省（Millî Eğitim Bakanlığı, MoNE）から認可を受けた私立学校などです。

これらの主体にとって、WCAG 2.2.2は直接的かつ実務的な意味を持ちます。一時停止ボタンのない自動再生の製品カルーセルを備えたECサイトは違反となります。停止コントロールのないスクロール式のセキュリティ通知ティッカーを用いる銀行のインターネットバンキングポータルは不適合です。停止できないアニメーション警告を用いる病院の予約ページも要件を満たしません。ループ再生の背景動画があり、可視の停止コントロールがない通信会社のホームページは、期限までに是正しなければなりません。

法的義務を超えて、トルコのアクセシビリティ法は、EU Web Accessibility DirectiveやEuropean Accessibility Act（EAA）に代表される、より広範な欧州の潮流と歩調を合わせています。トルコ企業が欧州市場に進出したり、欧州のユーザーにサービスを提供したりするにつれ、WCAG 2.2レベルA（2.2.2を含む）への適合は二重のコンプライアンス要件となります。Pause, Stop, Hideを正しく実装することは、国内法上の必須要件であると同時に、国際的なデジタルプレゼンスを持つトルコ企業にとって戦略的な資産でもあります。