WCAG 2.2 ガイドライン「2.2.4 中断の制御」Level AAA について
はじめに
WCAG 2.2の「2.2.4 中断の制御」では、非緊急の中断（通知やアラートなど）がユーザーの操作を妨げないように、制御や抑制が可能であることを求めています。この基準は、中断による混乱や操作ミスを防ぎ、すべてのユーザーが快適にコンテンツを操作できるようにすることを目的としています。
1. 適用範囲と要件
中断とは？
- 非緊急の通知: 新しいメッセージ、ニュース、システムアラートなど。
- 自動更新: リアルタイムでコンテンツが更新される通知。
要件
以下の条件を満たす必要があります：
- 中断を延期できる: ユーザーが通知や更新を後で確認できる仕組みを提供する。
- 中断を抑制できる: ユーザーが通知や更新を無効にできる仕組みを提供する。
- 緊急時の例外: 緊急を要する中断（例: 災害警報）は除外されます。
2. 実装方法
a. 通知の延期を実現する
通知の延期ボタンを提供
HTML
<div id="notification" style="display: none;">
<p>新しいメッセージがあります。</p>
<button id="postponeNotification">後で確認する</button>
</div>
<button id="showNotification">通知を表示</button>
JavaScript
const notification = document.getElementById('notification');
const showNotificationButton = document.getElementById('showNotification');
const postponeNotificationButton = document.getElementById('postponeNotification');
// 通知を表示
showNotificationButton.addEventListener('click', () => {
notification.style.display = 'block';
});
// 通知を延期
postponeNotificationButton.addEventListener('click', () => {
notification.style.display = 'none';
alert('通知を後で確認できます。');
});
b. 通知や更新を抑制する
通知の抑制オプションを提供
HTML
<label>
<input type="checkbox" id="suppressUpdates"> 自動更新を無効にする
</label>
<div id="autoUpdateContent">現在の更新情報: なし</div>
JavaScript
const suppressUpdatesCheckbox = document.getElementById('suppressUpdates');
const autoUpdateContent = document.getElementById('autoUpdateContent');
let updateInterval;
function startAutoUpdate() {
updateInterval = setInterval(() => {
autoUpdateContent.textContent = `現在の更新情報: ${new Date().toLocaleTimeString()}`;
}, 3000);
}
suppressUpdatesCheckbox.addEventListener('change', () => {
if (suppressUpdatesCheckbox.checked) {
clearInterval(updateInterval);
autoUpdateContent.textContent = '自動更新が無効になっています。';
} else {
startAutoUpdate();
}
});
startAutoUpdate(); // 初期状態で自動更新を開始
c. 緊急中断の例外処理
緊急通知を区別して表示
HTML
<div id="emergencyAlert" style="display: none; background-color: red; color: white;">
<p>緊急警報: 災害が発生しました！</p>
</div>
<button id="triggerEmergency">緊急警報をトリガー</button>
JavaScript
document.getElementById('triggerEmergency').addEventListener('click', () => {
const emergencyAlert = document.getElementById('emergencyAlert');
emergencyAlert.style.display = 'block';
alert('緊急警報が表示されました。');
});
3. よくある失敗例とその改善策
a. 自動更新の制御がない
失敗例
setInterval(() => {
document.getElementById('content').textContent = '新しい情報が追加されました。';
}, 3000);
問題点
- ユーザーが自動更新を停止または延期できません。
改善策
- チェックボックスやボタンで自動更新を制御可能にします。
b. 常にポップアップ通知が表示される
失敗例
alert('新しい通知があります！');
問題点
- ポップアップが頻繁に表示されると、ユーザー体験を妨げます。
改善策
- 非表示または延期可能な通知を使用します。
4. アクセシビリティのメリット
a. ユーザーの集中力を守る
- 中断が減ることで、ユーザーがコンテンツに集中できます。
b. ストレスの軽減
- 不要な中断が抑制されることで、快適なユーザー体験を提供します。
c. 緊急時の適切な対応
- 必要な場合にのみ通知を表示することで、緊急通知が適切に目立つようになります。
5. テスト方法
a. 手動テスト
- 通知や更新が延期または抑制できるか確認。
- 緊急通知が正しく表示されるか確認。
b. 自動テストツール
- 現時点では自動テストツールでは完全な検証が難しいため、手動での確認が推奨されます。
まとめ
WCAG 2.2の「2.2.4 中断の制御」は、中断がユーザー体験を妨げないようにすることを求めています。
実装ポイント
- 中断を延期または抑制する仕組みを提供する。
- 緊急通知は明確に区別し、必要な場合のみ表示する。
- ユーザーの操作を尊重する設計を採用する。
これらの実装により、すべてのユーザーにとって快適でストレスのないコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。