時間制限とは、一定時間が過ぎたときにセッションが終了したり、ページが自動的に移動したりして、ユーザーの操作や閲覧が打ち切られる仕組みです。
WCAG 2.2の達成基準「2.2.1 時間制限の調整」は、時間制限によって操作を続けにくくならないよう、ユーザーが制限を調整できる手段を用意することを求めています。
「Level A」は、この達成基準の適合レベルを示す表記です。
時間制限だけでなく、キーボード操作やナビゲーションを含む考え方は、Webアクセシビリティの「操作可能」とUI実装の基本でも整理しています。
時間制限を調整できる三つの方法
元の記事で挙げられている対応は、時間制限をオフにする、開始前に長さを調整する、終了前に延長するという三つです。
- オフにする：ユーザーが時間制限を無効にできるようにします。
- 調整する：操作を始める前に、ユーザーが制限時間を長く設定できるようにします。
- 延長する：終了前に通知し、ユーザーが操作を続けるための時間を追加できるようにします。
画面に時間制限があると表示するだけでは、調整手段を提供したことにはなりません。
ユーザーが選んだ設定を、実際のセッションや処理に反映させる必要があります。
時間に左右される場面を切り分ける
実装前に、どの処理が時間の経過によって変わるのかを洗い出します。
| 場面 | 起こり得る問題 | 確認する対応 |
|---|---|---|
| セッションのタイムアウト | 入力や操作の途中でセッションが終了する | 終了前の通知と延長手段を用意する |
| スクリプトによる時間制限 | ユーザーの意思と関係なく処理や画面が切り替わる | 制限時間の調整または無効化を選べるようにする |
| 読み取り時間の制限 | 読み終わる前に表示が変わる | 一時停止や再開など、閲覧を続ける手段を用意する |
自動スクロールする内容の一時停止と、ログインセッションの延長は、どちらも時間に関係しますが動作は別です。
一つの確認項目にまとめず、それぞれを実際に操作して確かめます。
スライドショーや自動更新を含む設計の考え方は、焦らせないウェブサイト設計とタイミング非依存の考え方も参考になります。
セッションタイムアウトの実装手順
時間切れで起こる動作を確認する
セッションが終了するのか、別のページへ移動するのか、入力内容を送信できなくなるのかを確認します。
終了後の動作が曖昧なままでは、適切な通知文や延長処理を設計できません。
ユーザーが選べる操作を決める
時間制限をオフにする、長く設定する、終了前に延長するという選択肢から、対象の処理に合う手段を用意します。
ボタンやチェックボックスには、「延長」のように操作結果が分かる名前を付けます。
終了前に通知する
通知では、セッションがまもなく終了することと、続けるために何をすればよいかを簡潔に伝えます。
通知だけを表示しても、ユーザーが延長や無効化を選べなければ問題は残ります。
画面とサーバーの状態を一致させる
元の記事にあるJavaScript例は、警告を再表示するタイマーをリセットするだけで、サーバー上のセッションを延長する処理までは含んでいません。
実装では、延長ボタンを押した結果が実際のセッションにも反映されたことを確認します。
よくある失敗例
画面上で延長したように見えるだけ
メッセージを表示したり、ブラウザー側のタイマーを再設定したりするだけでは、サーバー側のセッションが終了する可能性があります。
通知、操作、実際の延長処理を一連の機能として確認します。
メタリフレッシュで自動的に移動する
メタリフレッシュによる自動移動では、ユーザーが移動のタイミングを調整できません。
移動前に通知し、続行や延長を選べる設計に見直します。
サーバー側で警告なくリダイレクトする
タイムアウト後に別のページへ強制的に移動すると、ユーザーは作業を続ける機会を失います。
終了前に通知し、対象の処理で延長が可能なら、その操作を提供します。
手動テストの確認項目
時間制限の動作は、実際に時間切れを発生させて確認します。
- 時間制限が設定されている場面を特定する。
- 終了前に通知が表示されるか確認する。
- 時間制限を延長、調整、または無効化できるか確認する。
- 選択した操作が画面だけでなく、実際のセッションや処理に反映されるか確認する。
- 読み取り時間に関係する内容では、一時停止と再開が機能するか確認する。
AxeやWAVEなどの自動テストツールは確認を補助できますが、通知のタイミングや延長後のセッション動作までを一連の操作として確かめるには手動テストが必要です。
実装時に押さえる点
- 時間制限がある場所と、時間切れ後に起こる動作を明らかにする。
- ユーザーが時間制限をオフ、調整、または延長できる手段を用意する。
- 終了前の通知に、次にできる操作を分かりやすく示す。
- 画面上のタイマーだけでなく、実際のセッションや処理が延長されたことを確認する。
- 自動テストだけに頼らず、時間切れから延長後までを手動で試す。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。
アクセシビリティ向上にご興味がある方は、サービスの詳細をご覧ください。