WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

SCR16: 制限時間が切れようとしていることを利用者に警告するスクリプトを提供する

適用(対象)

スクリプトによって制御された制限時間

これは、次の達成基準に関連する実装方法である:

解説

この実装方法の目的は、インタラクションを完了させるための時間がほとんど無いことを利用者に通知することである。スクリプトによって、時間制限のある機能が提供される場合には、そのスクリプトは利用者に制限時間が迫っていることを警告する機能を含み、より多くの時間を要求するためのメカニズムを提供することができる。制限時間の20秒以上前に、そのスクリプトは制限時間が迫っている事を伝え、利用者がさらに時間を必要とするかどうかを尋ねる確認ダイアログを提供する。もし利用者の答えが「はい」の場合、制限時間をリセットする。もし利用者の答えが「いいえ」又は返答がない場合、制限時間の終了を許可する。

この実装方法は、window.setTimeout()メソッドで設定された制限時間に関係する。例えば、60秒で制限時間が切れる設定の場合、制限時間を40秒に設定して、確認ダイアログを表示させることができる。確認ダイアログが表示された時、新しく時間制限が残り20秒に設定される。「制限時間の猶予期間」の満了時に、当初の設計では60秒の制限時間の満了の時にとられていたであろう処置がとられる。

事例

事例 1

ある株式市場相場ページは最新の統計を利用可能な状態を確保するため5分毎にページを更新するスクリプトを使用している。その5分間が終了する20秒前に、確認ダイアログが表示され、利用者がページを更新する前にもっと時間が必要かどうかを尋ねる。これにより、利用者に更新が差し迫っていることを認識させるとともに、もし希望するならそれを回避できるようにする。

コード例:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<url>http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</title>">
<html lang="ja">
<head>

<title>株式相場市況</title>
<script type="text/javascript">
<!--
function timeControl() {
	// タイマーを4分40秒に設定し、利用者に確認を求める
	setTimeout('userCheck()', 280000);
}
function userCheck() {
	// ページの再読み込みを20秒に設定する
	var id=setTimeout('pageReload()', 20000);
	// 利用者が「OK」を選択した場合、タイマーがリセットされる
	// それ以外の場合、サーバーによりページが再読み込みされる
	if (confirm("このページは20秒後に再読み込みされるように設定されています。
	それ以上の時間が必要ですか?"))
	{
	clearTimeout(id);
	timeControl();
	}
}
function pageReload() {
	window.location.reload(true);
}
timeControl();
-->
</script>
</head>
<body>
<h1>株式相場市況</h1>

...その他のコンテンツ...
</body>
</html>

検証

チェックポイント

スクリプトによって時間制限を制御しているウェブページにおいて:

  1. ページを読み込み、制限時間より20秒少ないタイマーを開始する。

  2. タイマーが切れるとき、差し迫った時間制限を警告する確認ダイアログが表示されることを確認する。

判定基準

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。