WCAG 2.2 ガイドライン「2.2.5 再認証」Level AAA について
はじめに
WCAG 2.2の「2.2.5 再認証」では、認証セッションが期限切れとなった場合に、再認証後もデータを失わずに操作を継続できることを求めています。この基準は、ユーザーがセッション切れによって作業内容や進行中のデータを失うことを防ぎ、ストレスのない操作体験を提供することを目的としています。
1. 基準の概要
要件
- 認証セッションが切れた場合、再認証後にデータを復元し、作業を継続できる。
- 作業内容が失われないよう、データを一時保存する仕組みを提供する。
2. 実装方法
a. データの保存と復元
再認証後にデータを復元する例
HTML
<form id="dataForm">
<label for="inputData">入力内容:</label>
<input type="text" id="inputData" name="inputData" value="">
<button type="submit">送信</button>
</form>
<div id="authMessage" style="display: none;">
セッションが切れました。再認証してください。
<button id="reauthenticate">再認証</button>
</div>
JavaScript
let sessionActive = true; // セッションの状態をシミュレート
let savedData = ''; // 保存されたデータ
document.getElementById('dataForm').addEventListener('submit', (event) => {
event.preventDefault();
if (!sessionActive) {
savedData = document.getElementById('inputData').value;
document.getElementById('authMessage').style.display = 'block';
} else {
alert('データが送信されました: ' + document.getElementById('inputData').value);
}
});
document.getElementById('reauthenticate').addEventListener('click', () => {
sessionActive = true; // 再認証をシミュレート
document.getElementById('authMessage').style.display = 'none';
document.getElementById('inputData').value = savedData;
alert('再認証が完了しました。作業を続けてください。');
});
b. 再認証ページでのデータ保存
データを隠しフィールドとして保存
HTML
<form id="reauthPage">
<input type="hidden" id="savedData" name="savedData" value="">
<label for="password">パスワード:</label>
<input type="password" id="password" name="password">
<button type="submit">再認証</button>
</form>
JavaScript
const savedData = 'ここに入力されたデータを保存します';
document.getElementById('savedData').value = savedData;
document.getElementById('reauthPage').addEventListener('submit', (event) => {
event.preventDefault();
const recoveredData = document.getElementById('savedData').value;
alert('再認証が完了しました。復元されたデータ: ' + recoveredData);
});
c. サーバー側でデータをセッションに保存
サーバー側の例（擬似コード）
-
セッションが切れる直前にデータを保存：
sessionStorage.setItem('userData', userData); -
再認証後にデータを復元：
const recoveredData = sessionStorage.getItem('userData');
3. よくある失敗例とその改善策
a. セッション切れでデータが失われる
失敗例
- ユーザーが入力していた内容がセッション切れで完全に失われる。
改善策
- ローカルストレージやセッションストレージを使用してデータを保存します。
b. 再認証後にデータを復元できない
失敗例
- 再認証後、フォームがリセットされてデータが復元されない。
改善策
- 隠しフィールドやサーバー側でのセッションデータ管理を活用します。
4. アクセシビリティのメリット
a. ユーザー体験の向上
- 作業中のデータを失う心配がなく、安心して操作できます。
b. ストレスの軽減
- セッション切れによるストレスを軽減し、再認証後もスムーズに作業を再開できます。
c. 作業効率の向上
- データの復元により、再入力や作業のやり直しが不要になります。
5. テスト方法
a. 手動テスト
- セッション切れが発生する状況をシミュレート。
- 再認証後にデータが正しく復元されるか確認。
- 再認証プロセスがスムーズに進むか検証。
b. 自動テスト
- セッション管理をサポートするテストツールを使用して、データ復元の機能を確認。
まとめ
WCAG 2.2の「2.2.5 再認証」は、セッション切れが発生した場合でも、ユーザーがデータを失わずに作業を続行できることを目的としています。
実装ポイント
- データを保存し、再認証後に復元する機能を提供する。
- 隠しフィールドやセッションストレージを活用してデータを管理する。
- ユーザーがストレスなく再認証を完了できるプロセスを設計する。
これらの実装を通じて、すべてのユーザーに快適な操作環境を提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。