WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

ARIA19: エラーを特定するために、ARIA role=alert 又はライブ領域(Live Regions)を使用する

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

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

適用(対象)

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

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

ユーザエージェント及び支援技術によるサポート

ARIA19 に関するユーザエージェントサポートノート (英語)を参照のこと。WAI-ARIA技術ノートも参照。

解説

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

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

事例

事例 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. エラーメッセージが既に存在するエラーコンテナに挿入されたことをチェックする。

判定基準

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