【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。
これは、次の達成基準に関連する達成方法である:
ARIA19 に関するユーザエージェントサポートノートを参照のこと。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 も参照されたい。
次の例は、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
又は aria-live=assertive
属性が指定された空のエラーコンテナが、ページの読み込み時の DOM に存在することを判断する。
ライブ領域のコンテンツの表示又更新を引き起こすエラーをトリガーする。
エラーメッセージが既に存在するエラーコンテナに挿入されたことを判断する。
1. 及び 3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。