【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
これは、次の達成基準に関連する達成方法である:
この達成方法は、aria-invalid を使用して、検証に失敗しているフィールドを明確に識別する方法を示す。次の場合が最も使用に適している:
エラーの説明から、失敗したフィールドをプログラムによって識別できない。
失敗したフィールドが、一部の利用者に利用できない方法で――たとえば、色に依存しない、ボーダーのような視覚的な手がかりなどの技術によって視覚的にレンダリングされるエラーアイコンの使用によって――識別される。
注記: 上記二つの状況の一つは、データフォーマット、データ範囲、又はrequired プロパティを伝えるラベル及び／又は命令とプログラムによって関連付けられているフィールドにも起こりうる。
失敗したフィールドと具体的なエラーの説明をプログラム的に関連付けることが常に望ましい一方で、ページのデザイン又は利用されているフレームワークは、コンテンツ制作者がプログラム的に関連付けるための能力を制約するかもしれない。このような場合、コンテンツ制作者は、検証に失敗したフィールド上でプログラムによって aria-invalid を "true" に設定してもよい。これは主に、目の不自由な利用者によって使用される (スクリーンリーダー/画面拡大のような) 支援技術で解釈可能である。フィールドが "true" に設定された aria-invalid を持つ場合、フィールドがフォーカスを取得する際に、Safari の VoiceOver は "invalid data" とアナウンスし、JAWS と NVDA は "invalid entry" としてエラーを通知する。
この ARIA 属性は、プログラムによって設定/オンにされる必要がある。入力の検証が行われる又はフォームが送信される前に、その属性を "true" に設定するべきではない。aria-invalid を "false" に設定することは、フォームコントロールにこの属性を全く指定しないことと同じである。当然ながら、この場合、支援技術は利用者に何も伝えない。
可視テキストが、失敗したフィールドをプログラムによって識別する及び／又はエラーを補正できる方法を伝えるために使用される場合、aria-invalid を "true" に設定することは、厳格な整合性の観点からは必要とされないが、それでも利用者のために役立つ情報を提供する可能性がある。
何も入力されていない必須フィールドに 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>
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 に依存する各フォームコントロールに対して:
検証の失敗が存在しない場合に aria-invalid が true に設定されないことを確認する。
検証の失敗が存在する場合に aria-invalid が true に設定されることを確認する。
プログラム的に関連付けられたラベル/プログラム的にフィールドに関連づけられた説明文がエラーを理解するのに十分な情報を提供していることを確認する。
1. から 3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。