【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
利用者の入力を検証するコンテンツ
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、クライアントサイドのスクリプトによって、各フィールドで利用者が入力する値を確認することである。エラーが見つかった場合、警告ダイアログを表示し、エラーの内容をテキストで示す。警告ダイアログを閉じるとともに、スクリプトによってキーボードフォーカスをエラーが起こったフィールドに移動させれば、それは利用者にとって役立つ。
以下のスクリプトは、有効な日付がフォームのコントロールに入力されたかをチェックする。
コード例:
<label for="date">Date:</label>
<input type="text" name="date" id="date"
onchange="if(isNaN(Date.parse(this.value)))
alert('This control is not a valid date.
Please re-enter the value.');" />
次の例はフォーム内の複数のコントロールを表している。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 += "Name can only have letters and spaces. ";
// validate number
var pattern = /^[\d\-+\.\s]+$/;
var el = document.getElementById("tel");
if (!pattern.test(el.value)) msg += "Telephone number can only have digits and separators. ";
if (msg != "") {
alert(msg);
return false;
} else return true;
}
フォームコード:
<form action="multiple-controls.html" onsubmit="return validate()">
<p>
<label for="name">Name: </label>
<input type="text" name="name" id="name" />
</p>
<p>
<label for="tel">Telephone number: </label>
<input type="text" name="tel" id="tel" />
</p>
<p>
<input type="submit" />
</p>
</form>
利用者がフォームを送信したときに複数のコントロールをチェックする実装例にこの実装方法のデモがある。
特定の入力を必要とするフォームのフィールドに対して:
無効なデータを入力する。
エラーを説明している警告が提供されているかどうかを判断する。
2. の結果が真である
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。