WCAG 2.2「2.2.4 中断の制御」Level AAAの要件、実装例、テスト方法

greeden

2年前

WCAG 2.2の達成基準「2.2.4 中断の制御」は、通知や自動更新などの中断を、利用者が延期または抑制できるようにすることを求めます。

Level AAAは、この達成基準の適合レベルを示す表記です。

緊急時の中断は例外ですが、通常の通知まで一律に例外として扱うのではなく、利用者が作業を続けるか、あとで確認するかを選べる設計が必要です。

「中断の制御」が対象とするもの

この記事でいう中断とは、利用者が操作や閲覧を続けている途中に表示され、その流れを妨げる通知や更新を指します。

元の記事では、次のような中断を例に挙げています。

新しいメッセージやニュースの通知
システムから表示される非緊急のアラート
リアルタイムで内容が変わる自動更新

この達成基準は、通知そのものをなくすことを求めるものではありません。

通知を今すぐ受け取るか、あとに回すか、受け取らないかを利用者が選べることが焦点です。

延期、抑制、緊急時の扱い
扱い	意味	記事内の例
延期	その場での表示を止め、あとで確認できるようにすること	「後で確認する」操作を用意する
抑制	利用者が中断を無効にし、必要に応じて再開できるようにすること	自動更新を停止する設定を用意する
緊急時の例外	緊急を要する中断は、延期または抑制の対象から除外される	災害に関する緊急警報

設計時に分けて考える四つの判断

何が利用者の作業を中断するか

最初に、画面内で発生する通知と自動更新を洗い出します。

同じ通知でも、利用者が自分で開いたものと、操作中に割り込むものでは扱いが異なるため、表示される場面まで確認します。

延期後にどこで確認できるか

「後で確認する」ボタンで通知を隠すだけでは、延期したことにはなりません。

利用者が通知一覧などから再び内容を確認できるところまで設計します。

抑制を解除できるか

自動更新を停止できる場合は、停止中であることを示し、利用者が必要なときに再開できるようにします。

停止と再開を一つの設定で切り替えられると、現在の状態も把握しやすくなります。

緊急時の例外を通常の通知と分けられるか

緊急時の例外は、通常のメッセージやニュースまで強制表示してよいという意味ではありません。

緊急性のない通知には、延期または抑制する手段を残します。

延期と抑制の実装例

次のコードは、元の記事にある考え方を整理した最小限の例です。

実際のサービスでは、通知を再確認する場所や停止状態の扱いを含めて設計してください。

通知をいったん隠す

<div id="notification" hidden>
  <p>新しいメッセージがあります。</p>
  <button type="button" id="postponeNotification">後で確認する</button>
</div>
<button type="button" id="showNotification">通知を表示</button>

const notification = document.getElementById('notification');
const showButton = document.getElementById('showNotification');
const postponeButton = document.getElementById('postponeNotification');

showButton.addEventListener('click', () => {
  notification.hidden = false;
});

postponeButton.addEventListener('click', () => {
  notification.hidden = true;
});

この例が行うのは、通知の表示と非表示の切り替えだけです。

「後で確認する」という表示に合わせるには、隠した通知をあとで開ける場所も用意します。

自動更新を停止して再開する

<label>
  <input type="checkbox" id="suppressUpdates">
  自動更新を無効にする
</label>
<div id="autoUpdateContent">現在の更新情報: なし</div>

const suppressUpdates = document.getElementById('suppressUpdates');
const updateContent = document.getElementById('autoUpdateContent');
let updateInterval;

function startAutoUpdate() {
  updateInterval = setInterval(() => {
    updateContent.textContent = `現在の更新情報: ${new Date().toLocaleTimeString()}`;
  }, 3000);
}

suppressUpdates.addEventListener('change', () => {
  if (suppressUpdates.checked) {
    clearInterval(updateInterval);
    updateContent.textContent = '自動更新が無効になっています。';
  } else {
    startAutoUpdate();
  }
});

startAutoUpdate();

この例では、チェックボックスを選ぶと更新が止まり、選択を外すと再開します。

実装を確認するときは、表示文言だけでなく、更新処理が実際に停止しているかも確かめます。

よくある失敗と直し方

自動更新を止められない：停止または延期の操作を用意し、利用者が更新のタイミングを選べるようにします。
ポップアップが繰り返し表示される：非緊急の通知は強制表示を避け、あとで確認できる通知に置き換えます。
「後で確認する」を押すと通知が消えるだけ：通知一覧など、延期した内容に戻れる場所を用意します。
通常の通知と緊急時の例外を同じように扱う：何を緊急と判断するかを分け、非緊急の通知には利用者の選択を残します。

手動テストで確認する項目

中断が利用者の操作を妨げるかどうかは、画面の動きと操作の流れを見なければ判断できません。

自動テストだけで完結させず、次の順に手動で確認します。

画面内で自動的に表示される通知、アラート、自動更新を洗い出す。
非緊急の中断を延期または抑制できるか確認する。
延期した通知をあとで再び確認できるか試す。
自動更新を抑制したあと、更新が止まっているか確認する。
利用者が自動更新を再開できるか試す。
緊急時の例外と通常の通知が分けて扱われているか確認する。
同じ操作を繰り返しても、抑制した通知が意図せず再開しないか確認する。

公開後も確認を続ける方法は、Webアクセシビリティの試験と改善を運用に組み込む方法でも解説しています。

実装前の確認ポイント

非緊急の中断に、延期または抑制の手段がある。
延期した通知を、あとで確認できる。
抑制した自動更新を、利用者が再開できる。
緊急時の例外と通常の通知を分けている。

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティを提供しています。

アクセシビリティ向上に関心のある方は、サービスの詳細をご覧ください。