WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

ARIA21: エラー項目を示すために aria-invalid を使用する

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

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

適用(対象)

Accessible Rich Internet Applications (WAI-ARIA)を用いるHTML。

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

解説

この達成方法は、aria-invalidを使用して、検証に失敗しているフィールドを明確に識別する方法を示す。次の場合が最も使用に適している:

注記: 注: 上記2つの状況の1つは、データフォーマット、データ範囲、又はrequiredプロパティを伝えるラベル及び/又は命令とプログラムによって関連付けられているフィールドにも起こりうる。

失敗したフィールドと具体的なエラーの説明をプログラム的に関連付けることが常に望ましい一方で、ページのデザイン又は利用されているフレームワークは、コンテンツ制作者がプログラム的に関連付けるための能力を制約するかもしれない。このような場合、コンテンツ制作者は、検証に失敗したフィールド上でプログラムによって aria-invalid を "true" に設定してもよい。これは主に、目の不自由な利用者によって使用される(スクリーンリーダー/画面拡大のような)支援技術で解釈可能である。フィールドが "true" に設定されたaria-invalidを持つ場合、フィールドがフォーカスを取得する際に、SafariのVoiceOverは "invalid data" とアナウンスし、JAWSとNVDAは "invalid entry" としてエラーを通知する。

このARIA属性は、プログラムによって設定/オンにされる必要がある。入力の検証が行われる又はフォームが送信される前に、その属性を"true"に設定するべきではない。aria-invalidを "false" に設定することは、フォームコントロールにこの属性を全く指定しないことと同じである。当然ながら、この場合、支援技術は利用者に何も伝えない。

可視テキストが、失敗したフィールドをプログラムによって識別する及び/又はエラーを補正できる方法を伝えるために使用される場合、aria-invalidを"true"に設定することは、厳格な整合性の観点からは必要とされないが、それでも利用者のために役立つ情報を提供する可能性がある。

事例

事例 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>
            

動作する例

事例 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;	
}
            

動作する例.

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

検証の失敗の伝達をaria-invalidに依存する各フォームコントロールに対して:

  1. 検証の失敗が存在しない場合にaria-invalidがtrueに設定されない。

  2. 検証の失敗が存在する場合にaria-invalidがtrueに設定される。

  3. プログラム的に関連付けられたラベル/プログラム的にフィールドに関連づけられた説明文がエラーを理解するのに十分な情報を提供している。

判定基準

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