WCAG 2.2 ガイドライン「2.2.1 時間制限の調整」Level A について
はじめに
WCAG 2.2の「2.2.1 時間制限の調整」では、コンテンツで設定された時間制限がユーザーの操作を妨げないようにすることを求めています。特に、時間制限がある場合、以下のいずれかの方法でユーザーが時間制限を調整できる必要があります：
- 時間制限を延長できる。
- 時間制限をオフにできる。
- 時間制限を長く設定できる。
1. 基準の適用範囲と要件
時間制限の状況と要件
-
セッションのタイムアウト
- ユーザーがタイムアウトの延長をリクエストできる。
-
スクリプトによる時間制限
- ユーザーが制限時間を調整または無効化できる。
-
読み取り時間の制限
- コンテンツを一時停止して再開する機能を提供する。
2. 実装方法
a. セッションタイムアウトの調整
チェックボックスで延長オプションを提供
HTML
<form>
<label>
<input type="checkbox" id="extendSession"> セッションタイムアウトを延長する
</label>
<button type="submit">送信</button>
</form>
JavaScript
const extendSessionCheckbox = document.getElementById('extendSession');
extendSessionCheckbox.addEventListener('change', () => {
if (extendSessionCheckbox.checked) {
alert('セッションタイムアウトが延長されます。');
// サーバーに延長リクエストを送信するコードを追加
}
});
b. ユーザーが時間制限を調整可能にする
タイムアウトの通知と延長機能
HTML
<div id="timerAlert" role="alert" style="display: none;">
セッションがまもなく終了します。延長しますか？
<button id="extendTime">延長</button>
</div>
JavaScript
let timeout = setTimeout(showAlert, 5000); // 5秒後に警告を表示
function showAlert() {
const alertBox = document.getElementById('timerAlert');
alertBox.style.display = 'block';
}
document.getElementById('extendTime').addEventListener('click', () => {
clearTimeout(timeout); // タイマーをリセット
timeout = setTimeout(showAlert, 5000); // 再設定
alert('セッションが延長されました。');
});
c. コンテンツの一時停止と再開
動的コンテンツの一時停止機能
HTML
<div id="scrollingText">
自動スクロールするテキストがここに表示されます。
</div>
<button id="pauseButton">一時停止</button>
<button id="resumeButton">再開</button>
JavaScript
const scrollingText = document.getElementById('scrollingText');
let scrollInterval;
function startScrolling() {
scrollInterval = setInterval(() => {
scrollingText.scrollTop += 1;
}, 100);
}
function pauseScrolling() {
clearInterval(scrollInterval);
}
document.getElementById('pauseButton').addEventListener('click', pauseScrolling);
document.getElementById('resumeButton').addEventListener('click', startScrolling);
startScrolling(); // 自動スクロール開始
3. よくある失敗例とその対策
a. メタリフレッシュによるリダイレクト
失敗例
<meta http-equiv="refresh" content="5;url=https://example.com">
問題点
- ユーザーにタイムアウトやリダイレクトを制御する手段がない。
改善策
- JavaScriptを使用してリダイレクト前に通知と選択肢を提供します。
b. サーバー側の強制的なリダイレクト
問題点
- タイムアウト後にユーザーが警告を受けることなくページがリダイレクトされる。
改善策
- サーバータイムアウトをユーザーに通知し、延長オプションを提供します。
4. アクセシビリティのメリット
a. 誰でも操作可能なコンテンツ
- ユーザーがコンテンツを操作するための十分な時間を確保できます。
b. ストレスの軽減
- タイムアウトによるストレスを軽減し、ユーザー体験を向上させます。
5. テスト方法
a. 手動テスト
- 時間制限が通知されるか確認。
- 時間制限を延長またはオフにできるか確認。
- 動的コンテンツが一時停止および再開できるか確認。
b. 自動テストツール
- AxeやWAVEを使用して、時間制限の通知や調整機能を検証。
まとめ
WCAG 2.2の「2.2.1 時間制限の調整」は、すべてのユーザーが時間制限を管理できる仕組みを提供することを求めています。
実装ポイント
- セッションタイムアウトに延長オプションを提供する。
- スクリプトによる時間制限を通知し、延長や無効化を可能にする。
- 動的コンテンツの一時停止と再開をサポートする。
これにより、すべてのユーザーにとってストレスのない操作環境を実現できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。