diff --git a/techniques/aria/ARIA21.html b/techniques/aria/ARIA21.html index 86cc385a..bb6ed308 100644 --- a/techniques/aria/ARIA21.html +++ b/techniques/aria/ARIA21.html @@ -1,6 +1,6 @@ -
このWCAG 2.2 テクニック集の日本語訳は作業中となっています。WCAG 2.1 達成方法集の日本語訳をご利用いただけます。[ WCAG 2.1 達成方法集 ]
aria-invalid
- This technique relates to - -3.3.1: Error Identification -(Sufficient).
This technique applies to HTML with Accessible Rich Internet Applications.
このテクニックは、Accessible Rich Internet Applications を用いる HTMLに適用される。
This technique demonstrates how aria-invalid may be employed to specifically identify fields that have failed validation. Its use is most suitable when:
このテクニックは、aria-invalid を使用して、検証に失敗しているフィールドを明確に識別する方法を示す。次の場合が最も使用に適している:
Note
One of the above two situations may be true for a field which has programmatically associated label and / or instructions that conveys data format, a data range, or the required property.
required
注記
上記二つの状況の一つは、データフォーマット、データ範囲、又は required プロパティを伝えるラベル及び/又は命令とプログラムによって関連付けられているフィールドにも起こりうる。
While it is always preferable to programmatically associate specific error description with the failed field, the page's design or the framework employed may sometimes constrain the author's ability to do so. In these cases, authors may programmatically set aria-invalid to "true" on the fields that have failed validation. This is interpretable mainly by assistive technologies (like screen readers / screen magnifiers) employed by users who are vision impaired. When a field has aria-invalid set to “true”, VoiceOver in Safari announces invalid data when the field gets focus; JAWS and NVDA notify the error as an invalid entry.
"true"
This ARIA attribute has to be set / turned on programmatically. It should not be set to “true” before input validation is performed or the form is submitted. Setting aria-invalid to “false” is the same as not placing the attribute for the form control at all. Quite understandably, nothing is conveyed by assistive technology to users in this case.
When visible text is used to programmatically identify a failed field and / or convey how the error can be corrected, setting aria-invalid to "true" is not required from a strict compliance standpoint but may still provide helpful information for users.
失敗したフィールドと具体的なエラーの説明をプログラム的に関連付けることが常に望ましい一方で、ページのデザイン又は利用されているフレームワークは、コンテンツ制作者がプログラム的に関連付けるための能力を制約するかもしれない。このような場合、コンテンツ制作者は、検証に失敗したフィールド上でプログラムによって aria-invalid を "true" に設定してもよい。これは主に、目の不自由な利用者によって使用される (スクリーンリーダー/画面拡大のような) 支援技術で解釈可能である。フィールドが "true" に設定された aria-invalid を持つ場合、フィールドがフォーカスを取得するときに、Safari の VoiceOver は invalid data とアナウンスし、JAWS と NVDA は invalid entry としてエラーを通知する。
この ARIA 属性は、プログラムによって設定/オンにされる必要がある。入力の検証が行われる又はフォームが送信される前に、その属性を "true" に設定するべきではない。aria-invalid を "false" に設定することは、フォームコントロールにこの属性を全く指定しないことと同じである。当然ながら、この場合、支援技術は利用者に何も伝えない。
可視テキストが、失敗したフィールドをプログラムによって識別する及び/又はエラーを補正できる方法を伝えるために使用される場合、aria-invalid を "true" に設定することは、厳格な整合性の観点からは必要とされないが、それでも利用者のために役立つ情報を提供する可能性がある。
The aria-invalid attribute is used on required fields that have no input. A message above the form conveys that form submission has failed due to this.
A portion of the jQuery code and the HTML form markup follow:
何も入力されていない必須フィールドに aria-invalid 属性が指定されている。フォーム上部のメッセージは、フォームの送信がこのせいで失敗したことを伝えている。
jQuery コード及び HTML フォームマークアップの一部は次のとおりである:
<script> ... ... @@ -155,14 +148,14 @@ Example 1: Using aria-invalid on required fields <input type="submit" name="button" id="button" value="Submit"> </div> </form>
Working example: Using aria-invalid on required fields.
動作する例: Using aria-invalid on required fields.
Aria-invalid and aria-describedby are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using aria-describedby, and aria-invalid makes it easier to programmatically find fields with errors.
Aria-invalid
aria-describedby
Below is the rendered HTML code for the email address field in Example 1: When an invalid email address is entered by the user such as "samexample.com" (instead of sam@example.com), the HTML code is:
aria-invalid 及び aria-describedby が、個人識別番号 (PIN)、電子メールアドレス、又は開始日が期待される形式でない場合に、エラーを示すために一緒に使用されている。エラーメッセージは、aria-describedby を使うことでフィールドに関連付けられており、aria-invalid によって、エラーになっているフィールドをプログラムによって簡単に見つけられるようになっている。
下記は、事例 1 において電子メールアドレスフィールドにレンダリングされる HTML コードである。(sam@example.com の代わりに) "samexample.com" のような不正な電子メールアドレスが利用者によって入力された場合、HTML コードは次のようになる:
<div class="control"> <div> <label for="email">Email address: [*]</label> @@ -171,7 +164,7 @@ Example 2: Identifying errors in data format </div> <span class="errtext" id="err_1">Error: Incorrect data</span> </div>
And when no data is entered in the email field, the HTML code is:
そしてデータが電子メールフィールドに入力されなかった場合、HTML コードは次のようになる:
<div class="control"> <div><label for="email">Email address: [*]</label> @@ -180,13 +173,13 @@ Example 2: Identifying errors in data format </div> <span class="errtext" id="err_2">Error: Input data missing</span> </div>
jQuery code: jQuery is used to add aria-invalid or aria-describedby attributes as well as the class attribute and append the error text. This is the code that inserts aria-invalid and class="error" but does not associate the error text "incorrect data" with the control programmatically:
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 Code:
CSS コード:
input.error { border: red thin solid; } @@ -200,11 +193,11 @@ Example 2: Identifying errors in data format margin-bottom: 1em; padding: .25em 1.4em .25em .25em; }
Working example: Identifying errors in data format.
動作する例: Identifying errors in data format.
No endorsement implied.
推奨を意味するものではない。
For each form control that relies on aria-invalid to convey a validation failure:
検証の失敗の伝達を aria-invalid に依存する各フォームコントロールに対して:
Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list public-agwg-comments@w3.org or via GitHub
あなたのアイデア、提案、又はコメントを、Google フォーム 又は GitHub で共有してください。
この文書は、2025 年 5 月 21 日付けの Techniques for WCAG 2.2 を、ウェブアクセシビリティ基盤委員会 (WAIC) の翻訳ワーキンググループが翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書は作業進行中です。また、あくまで参考情報であり、翻訳上の誤りが含まれていることがあります。 +
この翻訳文書の利用条件については、WAICが提供する翻訳文書のライセンスをご覧ください。