WCAG 2.2 ガイドライン「2.2.6 タイムアウト」Level AAA について
はじめに
WCAG 2.2の「2.2.6 タイムアウト」は、ユーザーの操作が一定時間ない場合にデータが失われる可能性がある場合、適切に警告を提供することを求めています。この基準は、ユーザーが不意にデータを失うことを防ぎ、安心して作業を進められる環境を提供するためのものです。
1. 基準の概要
要件
以下のいずれかを満たす必要があります：
- セッションが20時間以上保持される場合:
- 特に追加の警告を提供する必要はありません。
- 20時間未満でタイムアウトが発生する場合:
- データが失われる可能性があることをユーザーに警告する仕組みを提供する。
2. 実装方法
a. タイムアウト時間の通知
ユーザーにセッションのタイムアウト時間を通知
HTML
<p id="timeoutWarning"></p>
<button id="extendSession">セッションを延長する</button>
JavaScript
let sessionDuration = 600000; // 10分（600,000ミリ秒）
let timeoutWarningDuration = 300000; // タイムアウトの5分前（300,000ミリ秒）
let timeout;
function startSession() {
timeout = setTimeout(showTimeoutWarning, sessionDuration - timeoutWarningDuration);
}
function showTimeoutWarning() {
const warningMessage = document.getElementById('timeoutWarning');
warningMessage.textContent = 'セッションがまもなく切れます。延長しますか？';
document.getElementById('extendSession').style.display = 'inline-block';
}
document.getElementById('extendSession').addEventListener('click', () => {
clearTimeout(timeout);
startSession();
document.getElementById('timeoutWarning').textContent = '';
alert('セッションが延長されました！');
});
// セッションを開始
startSession();
b. データを長時間保持する
セッションデータをサーバーに保存
ユーザーのデータを20時間以上保存することで、タイムアウト時にデータが失われるのを防ぎます。
擬似コード（サーバー側）
// サーバーにセッションデータを保存
app.post('/saveData', (req, res) => {
const userData = req.body.data;
// データをセッションに保存（有効期限20時間）
req.session.userData = userData;
req.session.cookie.maxAge = 20 * 60 * 60 * 1000; // 20時間
res.send('データが保存されました。');
});
c. タイムアウト前の警告を提供
進行中のプロセスの開始時に通知
ユーザーがプロセスを開始する際、タイムアウトの時間を明示します。
HTML
<div>
<p>このセッションは10分間アクティブです。時間内に操作を完了してください。</p>
</div>
3. よくある失敗例とその改善策
a. タイムアウトの警告がない
失敗例
- ユーザーが操作を行わないままタイムアウトが発生し、データが失われる。
改善策
- タイムアウト前に適切な警告を提供し、延長オプションを用意します。
b. データの保存期間が不十分
失敗例
- セッションデータが数分で失効し、ユーザーが再ログイン後にデータを失う。
改善策
- セッションデータを少なくとも20時間保持するか、データをサーバーまたはローカルストレージに保存します。
4. アクセシビリティのメリット
a. ユーザーの安心感の向上
- タイムアウトによる予期せぬデータ損失を防ぎます。
b. 作業効率の向上
- ユーザーが安心して操作を続けられるため、スムーズに作業を進められます。
c. すべてのユーザーに配慮
- 認知障害や操作速度に制約があるユーザーも、操作を完了するための十分な時間が確保されます。
5. テスト方法
a. 手動テスト
- タイムアウトが発生する状況をシミュレート。
- タイムアウト前に警告が表示されることを確認。
- タイムアウト後もデータが失われないことを確認。
b. 自動テストツール
- AxeやWAVEなどのアクセシビリティツールで、タイムアウト関連の警告やデータ保存機能を確認。
まとめ
WCAG 2.2の「2.2.6 タイムアウト」は、ユーザーがセッションタイムアウトによるデータ損失を防ぐための基準を提供します。
実装ポイント
- タイムアウト前にユーザーに警告を表示する。
- データを20時間以上保持するか、タイムアウト後も復元可能にする。
- プロセス開始時にタイムアウトの時間を通知する。
これらの実装により、すべてのユーザーにとって快適で安全な操作環境を提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。