WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

SCR18: クライアントサイドのバリデーション及びアラートを提供する

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

利用者の入力を検証するコンテンツ

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

解説

この達成方法の目的は、クライアントサイドのスクリプトによって、各フィールドで利用者が入力する値を確認することである。エラーが見つかった場合、警告ダイアログを表示し、エラーの内容をテキストで示す。警告ダイアログを閉じるとともに、スクリプトによってキーボードフォーカスをエラーが起こったフィールドに移動させれば、それは利用者にとって役立つ。

事例

事例 1: イベントハンドラで単一のコントロールをチェックする

以下のスクリプトは、有効な日付がフォームのコントロールに入力されたかをチェックする。

コード例:


<label for="date">日付:</label>
<input type="text" name="date" id="date" 
onchange="if(isNaN(Date.parse(this.value))) 
alert('alert('このコントロールは日付が正しくありません。値を再び入力してください。');" />

事例 2: 利用者がフォームを送信したときに複数のコントロールをチェックする

次の例はフォーム内の複数のコントロールを表している。form 要素は、利用者がフォームを送信しようとした際、検証スクリプトを実行するために、イベントハンドラを作成する onsubmit 属性を用いている。検証で問題がない場合、イベントは true を返し、フォームの送信を続行する。検証でエラーが検出された場合は、利用者が問題を修正できるようエラーメッセージを表示し、送信を取り消すために false を返す。

注記 1: この事例は簡潔さのためにアラートを用いて説明している。利用者により役立つ通知は、問題のあるコントロールをハイライトし、エラーの内容とデータの修正が必要なコントロールに移動する方法をページ上に示すことである。

注記 2: この事例では簡潔さのために form 要素に onsubmit 属性を用いているが、通常であればページがロードした際にフォーム送信用のイベントリスナーを作成する。

スクリプトコード:


function validate() {
	// initialize error message
	var msg = "";
	
	//validate name
	var pattern = /^[a-zA-Z\s]+$/;
	var el = document.getElementById("name");
	if (!pattern.test(el.value))  msg += "名前は文字及びスペースのみ含むことができます。";
	
	// validate number
	var pattern = /^[\d\-+\.\s]+$/;
	var el = document.getElementById("tel");
	if (!pattern.test(el.value))  msg += "電話番号は数字及びセパレーターのみ含むことができます。";
	
	if (msg != "") {
		alert(msg);
		return false;
	} else return true;
}

フォームコード:


<form action="multiple-controls.html" onsubmit="return validate()">
	<p>
		<label for="name">名前: </label>
		<input type="text" name="name" id="name" />
	</p>
	<p>
		<label for="tel">電話番号: </label>
		<input type="text" name="tel" id="tel" />				
	</p>
	<p>
		<input type="submit" />
	</p>
</form>

利用者がフォームを送信したときに複数のコントロールをチェックする実装例にこの実装方法のデモがある。

検証

チェックポイント

特定の入力を必要とするフォームのフィールドに対して:

  1. 無効なデータを入力する。

  2. エラーを説明している警告が提供されている。

判定基準

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