エラーを特定するために、ARIA role=alert 又はライブリージョン (Live Regions) を使用する

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。

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

解説

この達成方法の目的は、入力エラーが発生した場合に支援技術 (AT) に通知することである。aria-live 属性は、エラーメッセージがライブ領域のコンテナに注入された際に、AT (スクリーンリーダーなど) による通知を可能にする。aria-live 領域内部のコンテンツは、テキストが表示されている場所で AT がフォーカスする必要なしに、AT によって自動的に読みあげられる。

ライブ領域のプロパティを直接適用する代わりに使用できる特殊ケースのライブ領域のロールも多数ある。

訳注:

「特殊ケースのライブ領域のロール」のリンクは、正しくは WAI-ARIA 1.0 Authoring Practices§5.3. Choosing Between Special Case Live Regions となる。しかしながら、この文書は古い文書である。ライブ領域のロールについては、WAI-ARIA 1.1§5.3.5 Live Region Roles も参照されたい。

事例

事例 1: DOM 内にすでに存在する role=alert をもつコンテナの中にエラーメッセージを注入する

次の例は、aria-live=assertive を使用しているのと同等の role=alert を使用する。

例において、ページロード時に DOM に存在する aria-atomic=true 及び aria-live プロパティ又は alert ロールをもつ空のエラーメッセージコンテナ要素が存在する。エラーコンテナは、ほとんどのスクリーンリーダーでエラーメッセージが読み上げられるために、ページロード時に DOM に存在しなければならない。aria-atomic=true は、複数の無効な投稿をした後にエラーメッセージを iOS の Voiceover に読み上げさせるために必要である。

jQuery は、送信時に入力が空であるかどうかをテストし、そうであれば、ライブ領域コンテナにエラーメッセージを注入するために使用される。新しい送信が試みられるたびに、前のエラーメッセージがコンテナから削除され、新しいエラーメッセージが挿入される。

<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(e) {
	$('#signup').submit(function() {
		$('#errors').html('');
		if ($('#first').val() === '') {
			$('#errors').append('<p>Please enter your first name.</p>');
		}
		if ($('#last').val() === '') {
			$('#errors').append('<p>Please enter your last name.</p>');
		} 
		if ($('#email').val() === '') {
			$('#errors').append('<p>Please enter your email address.</p>');
		} 
		return false;
	});
});
</script>

<form name="signup" id="signup" method="post" action="">
  <p id="errors" role="alert" aria-atomic="true"></p>
  <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>

実装例: エラーを識別するために role=alert を使用する

参考リソース

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

検証

手順

  1. role=alert 又は aria-live=assertive 属性が指定された空のエラーコンテナが、ページの読み込み時の DOM に存在することを判断する。
  2. ライブ領域のコンテンツの表示又更新を引き起こすエラーをトリガーする。
  3. エラーメッセージが既に存在するエラーコンテナに挿入されたことを判断する。

期待される結果

  • 1. 及び 3. の結果が真である。