エラーフィールドを示すために aria-invalid を使用する

事例 1: 必須フィールドに aria-invalid を使用する

何も入力されていない必須フィールドに aria-invalid 属性が指定されている。フォーム上部のメッセージは、フォームの送信がこのせいで失敗したことを伝えている。

jQuery コード及び HTML フォームマークアップの一部は次のとおりである:

<script>
...
...
		if ($('#first').val() === '') {
			$('#first').attr("aria-invalid", "true");
$("label[for='first']").addClass('failed');
		}
		if ($('#last').val() === '') {
			$('#last').attr("aria-invalid", "true");
$("label[for='last']").addClass('failed');
		} 
		if ($('#email').val() === '') {
			$('#email').attr("aria-invalid", "true");
$("label[for='email']").addClass('failed');
		} 
...
...
</script>
<style type="text/css">
label.failed {
	border: red thin solid;
}
</style>
<form name="signup" id="signup" method="post" action="#">
 <p>
    <label for="first">First Name (required)</label><br>
    <input type="text" name="first" id="first">
  </p>
  <p>
    <label for="last">Last Name (required)</label><br>
    <input type="text" name="last" id="last">
  </p>
  <p>
    <label for="email">Email (required)</label><br>
    <input type="text" name="email" id="email">
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit">
  </p>
</form>
            

動作する例: Using aria-invalid on required fields.

事例 2: データフォーマットのエラーを識別する

Aria-invalid 及び aria-describedby が、個人識別番号 (PIN)、電子メールアドレス、又は開始日が期待される形式でない場合に、エラーを示すために一緒に使用されている。エラーメッセージは、aria-describedby を使うことでフィールドに関連付けられており、aria-invalid によって、エラーになっているフィールドをプログラムによって簡単に見つけられるようになっている。

以下は、事例 1 において電子メールアドレスフィールドにレンダリングされる HTML コードである。(sam@example.com の代わりに) "samexample.com" のような不正な電子メールアドレスが利用者によって入力された場合、HTML コードは次のようになる:

<div class="control">
<p><label for="email">Email address: [*]</label> 
<input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedBy="err_1" /></p> 
<span class="errtext" id="err_1">Error: Incorrect data</span></div>
            

そしてデータが電子メールフィールドに入力されなかった場合、HTML コードは次のようになる:

<div class="control">
<p><label for="email">Email address: [*]</label> 
<input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedBy="err_2" /></p>
<span class="errtext" id="err_2">
 Error: Input data missing</span>
</div>             

jQuery コード: jQuery は、class 属性だけでなく aria-invalid 又は aria-describedby 属性をも追加し、かつエラーテキストを追加するために使用される。これは、aria-invalid 及び class="error" を挿入するコードであるが、プログラム的にコントロールとエラーテキスト "incorrect data" を関連付けないコードである:

$(errFld).attr("aria-invalid", "true").attr("class", "error");
// Suffix error text: 
$(errFld).parent().append('<span class="errtext">Error: Incorrect data</span>');
            

CSS コード:

input.error {
   border: red thin solid;}
span.errtext {
	margin-bottom: 1em; 	padding: .25em 1.4em .25em .25em;
	border: red thin solid; 	background-color: #EEEEFF;
	background-image:url('images/iconError.gif');
	background-repeat:no-repeat; 	background-position:right;	
}
            

動作する例: Identifying errors in data format.