サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

WCAG 2.2「2.2.2 一時停止、停止、非表示」（レベルA）の要件と実装例

greeden
red and yellow stop sticker

Photo by Linda Eller-Shein on Pexels.com

WCAG 2.2の達成基準「2.2.2 一時停止、停止、非表示」は、自動で動いたり更新されたりする視覚情報が、ページの閲覧や操作を妨げないようにするためのレベルAの基準です。

対象は、動く情報、点滅する情報、スクロールする情報、自動更新する情報です。

ただし、すべての動的コンテンツに同じ対応を求めているわけではありません。

表示時間、開始方法、ほかの内容と同時に表示されるかを確認し、利用者が動きや更新を制御できるようにします。

対象となる情報と判定条件

動的コンテンツとは、利用者が読み進めている間にも、表示位置や見た目、内容が時間に応じて変わる情報を指します。

W3Cの達成基準2.2.2本文は、対象を次の二つに分けています。

達成基準2.2.2の判定条件
情報の種類 対象となる条件 求められる手段
動く、点滅する、スクロールする情報 自動で始まり、5秒を超えて続き、ほかの内容と並行して提示される 一時停止、停止、非表示のいずれかを利用者が選べる仕組み
自動更新する情報 自動で始まり、ほかの内容と並行して提示される 一時停止、停止、非表示、更新頻度の調整のいずれかを利用者が選べる仕組み

「ほかの内容と並行して提示される」とは、利用者が別の文章や操作対象を扱っている間にも、動きや更新が続く状態です。

たとえば、本文の横で自動再生されるカルーセルや、ページ上部を流れ続ける告知は、この条件に当てはまる可能性があります。

5秒の例外は、動く、点滅する、スクロールする情報だけに適用されます。

自動更新する情報には5秒の例外がないため、短時間で更新が終わることだけを理由に制御を省くことはできません。

動きや更新が活動に不可欠な場合は例外となりますが、安易に「不可欠」と判断せず、停止すると活動が成立しない理由を確認します。

一時停止、停止、非表示の違い

達成基準名には三つの操作が並んでいますが、三つすべてを必ず用意するという意味ではありません。

コンテンツの目的に合う制御を選び、利用者がその操作を見つけて実行できるようにします。

一時停止中の情報を再開するときは、停止した位置から続ける方法と、最新の状態へ移る方法があります。

ニュース速報や時刻など、古い状態を表示すると誤解を招く情報では、再開時に最新の状態へ戻す設計が適しています。

スクロールする情報の実装例

次の例は、自動スクロールを一時停止し、再開できる最小構成です。

再開ボタンを連続して押してもタイマーが重複しないように、動作中かどうかを確認しています。

HTML

<div id="ticker">
  自動スクロールするお知らせがここに表示されます。
</div>
<button type="button" id="pauseTicker" aria-controls="ticker">
  スクロールを一時停止
</button>
<button type="button" id="resumeTicker" aria-controls="ticker">
  スクロールを再開
</button>

JavaScript

const ticker = document.getElementById('ticker');
let scrollTimer = null;

function startScrolling() {
  if (scrollTimer !== null) return;

  scrollTimer = window.setInterval(() => {
    ticker.scrollLeft += 1;
  }, 50);
}

function pauseScrolling() {
  if (scrollTimer === null) return;

  window.clearInterval(scrollTimer);
  scrollTimer = null;
}

document
  .getElementById('pauseTicker')
  .addEventListener('click', pauseScrolling);

document
  .getElementById('resumeTicker')
  .addEventListener('click', startScrolling);

startScrolling();

実際の画面では、ボタンをキーボードでも操作できること、フォーカスが見えること、停止後に自動で再開しないことも確認します。

点滅を5秒以内に終える実装例

点滅が5秒以内に終わる場合は、達成基準2.2.2の「5秒を超えて続く」という条件に該当しません。

次のCSSは、1秒のアニメーションを5回実行して終了します。

HTML

<p id="notice">確認が必要な項目があります。</p>

CSS

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

#notice {
  animation: blink 1s 5;
}

注意を伝える手段を点滅だけに頼らず、本文でも何を確認すべきかを示します。

自動更新する情報の実装例

自動更新では、5秒以内かどうかにかかわらず、更新を制御する手段が必要です。

次の例では、時刻表示の更新を停止し、再開できます。

HTML

<p id="updateTime">更新を待っています。</p>
<button type="button" id="stopUpdate" aria-controls="updateTime">
  更新を停止
</button>
<button type="button" id="startUpdate" aria-controls="updateTime">
  更新を再開
</button>

JavaScript

const updateTime = document.getElementById('updateTime');
let updateTimer = null;

function startUpdating() {
  if (updateTimer !== null) return;

  updateTimer = window.setInterval(() => {
    updateTime.textContent =
      `更新時刻: ${new Date().toLocaleTimeString()}`;
  }, 1000);
}

function stopUpdating() {
  if (updateTimer === null) return;

  window.clearInterval(updateTimer);
  updateTimer = null;
}

document
  .getElementById('stopUpdate')
  .addEventListener('click', stopUpdating);

document
  .getElementById('startUpdate')
  .addEventListener('click', startUpdating);

startUpdating();

点滅と閃光を同じものとして扱わない

達成基準2.2.2で扱う点滅は、主に注意がそらされてページの利用が難しくなる問題への対応です。

発作につながる可能性がある閃光は、ガイドライン2.3「発作と身体的反応」で別に評価します。

したがって、「5秒以内に止めれば閃光の安全性も確保できる」という意味ではありません。

両者の違いや動きに関する配慮は、サイト内のモーションとアニメーションのアクセシビリティでも確認できます。

よくある失敗

手動テストの手順

動きの継続時間や停止後の挙動は、画面を操作して確認します。

  1. ページ内のアニメーション、カルーセル、スクロール表示、点滅、自動更新を洗い出します。
  2. 自動で始まるか、5秒を超えるか、ほかの内容と並行して表示されるかを分類します。
  3. 自動更新については、5秒という条件を使わずに判定します。
  4. 一時停止、停止、非表示、更新頻度の調整のうち、用意された操作をキーボードとポインティングデバイスで試します。
  5. 停止後に勝手に再開しないことと、再開操作を繰り返しても速度が変わらないことを確認します。
  6. 閃光が含まれる場合は、達成基準2.3.1などの判定も別に行います。

自動ツールは関連する実装上の問題を見つける補助として使い、最終判断は手動確認と組み合わせます。

確認作業の組み立て方は、ウェブアクセシビリティチェックの進め方も参考にしてください。

設計時の確認点

動的コンテンツを使うときは、見た目の演出だけでなく、利用者が自分のペースで読んで操作できる状態を保つことが設計の基準になります。

当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。アクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。

モバイルバージョンを終了