日本語
サイトメニュー

invalid-field-error-message

無効とマークされたフィールドには、表示されるエラーメッセージがあることを推奨します

automaticWCAG 3.3.1 (A)確度：high重大度：seriousunderstandable

aria-invalidを持つ要素に、テキストによるエラーメッセージがあることを確認します。aria-errormessageは、表示されていてテキストを持つ要素を示すことが望ましく、メッセージが関連付けられていないフィールドについては確認を求めます。

適用範囲：ページが表示し、アクセシビリティツリーに含まれ、無効化されていない要素のうち、aria-invalidが無効であることを示しているものです。つまりtrue、またはARIAがtrueと読む値（false、grammar、spelling、空以外のすべて）です。grammarとspellingはテキストに付ける印であり、ユーザーが入力した値に付けるものではありません。

期待される結果：エラーが特定され、テキストでユーザーに説明されています（WCAG 3.3.1）。

  • aria-errormessageが、表示されていてテキストを持つ要素を示している場合：pass。
  • aria-errormessageが、隠れている要素だけを示している場合（ERROR_MESSAGE_HIDDEN）：fail寄りのcantTell。ARIAはフィールドが無効である間メッセージを表示することを求めており、ページはそうなっていないと示しています。ただし、空のメッセージと同じく、エラーがラベルやフィールドの横で伝えられている可能性もあり、それで3.3.1は満たされます。
  • aria-errormessageが、表示されているもののテキストのない要素だけを示している場合（ERROR_MESSAGE_EMPTY）：cantTell。ARIAはメッセージのテキストについてMUSTを定めておらず、エラーがラベルやフィールドの横で伝えられている可能性もあり、それで3.3.1は満たされます。フィールドのaria-describedbyが説明を与えている場合は、エラーがそこにある可能性があります：cantTell（ERROR_MESSAGE_NOT_SHOWN_DESCRIBED）。
  • aria-errormessageが、ページのどの要素も示していない場合：cantTell（ERROR_MESSAGE_TARGET_MISSING）。スクリプトが追加する可能性があります。
  • aria-errormessageがなく、aria-describedbyが説明を与えている場合：pass。
  • どちらもない場合：cantTell（NO_ERROR_MESSAGE）。エラーは、マークアップがフィールドに関連付けていないラベルや、フィールドの横のテキストにある可能性があります。どのフィールドにエラーがあり、何が問題なのかが、テキストでユーザーに伝えられているかを確認してください。
  • aria-errormessageが、それ自体がaria-hiddenであるか、aria-hiddenの要素の中にあるメッセージを示している場合：fail寄りのcantTell（ERROR_MESSAGE_HIDDEN、hiddenBy: 'aria-hidden'付き）。ARIAはそうした要素を隠れているとみなし、関係するエラーメッセージが隠れていないことを求めています。
  • aria-errormessageが、表示されているメッセージを示しているものの、メッセージ自体はaria-hiddenでないのにそのテキストがすべてaria-hiddenの要素の中にある場合：cantTell（ERROR_MESSAGE_ARIA_HIDDEN）。見ている人には伝わりますが、スクリーンリーダーのユーザーには伝わらない可能性があります。

要素が隠れているとみなすのは、誰にも見えない場合です。つまり、要素自身または祖先のdisplay: none、visibility: hidden、hidden、閉じた<details>、content-visibility: hiddenです。visibility: hiddenで隠されたメッセージでも、テキストがvisibility: visibleで再表示されていれば表示されているとみなします。テキストとは、アクセシブルな名前の計算が読むものです。画像のaltは数に入り、メッセージの中で隠されたテキストは数に入りません。メッセージはidで示すことも、スクリプトから要素として設定すること（ariaErrorMessageElements）もできます。

検出結果が報告する内容：

  • ariaInvalid：属性の値です。
  • hiddenBy（ERROR_MESSAGE_HIDDEN）：メッセージを隠しているのがaria-hiddenだけの場合はaria-hiddenです。誰にも見えない場合は付きません。
  • errorMessageIds：aria-errormessageが示すidで、ない場合は[]です。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<label for="email">Email</label>
<input id="email" aria-invalid="true" aria-errormessage="email-error">
<p id="email-error">Enter an email address, like name@example.com.</p>

フィールドは無効とマークされており、aria-errormessageが示すメッセージは表示されていて、何が問題かを伝えています。

can't tell
<label for="email">Email</label>
<input id="email" aria-invalid="true" aria-errormessage="email-error">
<p id="email-error" hidden>Enter an email address, like name@example.com.</p>

フィールドは無効とマークされていますが、そのエラーメッセージは隠れています。fail寄りです。フィールドに関連付けられたメッセージは見ることも聞くこともできませんが、エラーがラベルやフィールドの横で伝えられている可能性はあります。

can't tell
<label for="age">Age</label>
<input id="age" aria-invalid="true">
<p>Age must be a number.</p>

フィールドにメッセージが関連付けられていません。横のテキストがエラーを説明している可能性があります。どのフィールドにエラーがあり、なぜなのかがテキストでユーザーに伝えられているかを、人が確認します。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

ERROR_MESSAGE_ARIA_HIDDEN

  1. レポートに示されたフィールドを見つけ、そのエラーメッセージが画面上に表示されていることを確認してください。
  2. aria-errormessageが指すメッセージ要素を調べ、その子のうちaria-hidden="true"を持つものを控えてください。
  3. スクリーンリーダーを起動した状態でフィールドにフォーカスを移すか、アクセシビリティペインでエラーメッセージと説明を読んでください。
  4. エラーの言葉が、何らかの経路でスクリーンリーダーに届くかを控えてください。

満たす場合：スクリーンリーダーの利用者には、たとえばフィールドの説明やラベルを通じて、画面に表示されているのと同じエラーテキストが伝わります。

満たさない場合：エラーは表示されていますが支援技術からは隠されているため、スクリーンリーダーの利用者に何が誤っているかが伝わらず、WCAG 3.3.1を満たしません。

ERROR_MESSAGE_EMPTY

  1. レポートに示されたフィールドを見つけ、エラー状態がまだ表示されていなければ、エラー状態にしてください（フォームを送信するか無効な値を入力します）。
  2. フィールドを調べ、aria-errormessage属性が指す要素を見つけて、それが空であることを確認してください。
  3. フィールドのラベルとその隣のテキストに、どのフィールドがエラーで何が誤っているかを伝える言葉があるか確認してください。
  4. スクリーンリーダーを起動した状態でフィールドにフォーカスを移すか、アクセシビリティペインで名前と説明を確認し、エラーが伝わるかを控えてください。

満たす場合：ラベルやフィールドの隣のメッセージなど、ページ上のテキストが、どのフィールドがエラーで何が誤っているかを伝えています。

満たさない場合：どのフィールドがエラーで何が誤っているかを利用者に伝えるテキストがないため、WCAG 3.3.1を満たしません。

ERROR_MESSAGE_HIDDEN

  1. 利用者と同じ方法でフィールドを無効な状態にしてください（フォームを空のまま送信するか、誤った値を入力します）。
  2. フィールドが指すエラーメッセージ（aria-errormessageによるもの）を探し、画面上に表示されるか確認してください。
  3. 表示されない場合は、ラベル内、フィールドの隣、またはフォーム上部の概要に、何が誤っているかを伝えるテキストがないか探してください。
  4. スクリーンリーダーでフィールドに移動し、エラーが読み上げられるか聞いてください。

満たす場合：aria-errormessageが示すメッセージでなくても、フィールドに結び付いたどこかでエラーがテキストで表示され、読み上げられます。

満たさない場合：どのフィールドがなぜ誤っているかを伝えるテキストがないか、スクリーンリーダーの利用者に伝わらないため、WCAG 3.3.1を満たしません。

ERROR_MESSAGE_NOT_SHOWN_DESCRIBED

  1. レポートに示されたフィールドを見つけ、エラー状態がまだ表示されていなければ、エラー状態にしてください。
  2. フィールドについてアクセシビリティペインを開き、その説明（aria-describedbyによるもの）を読んでください。
  3. その説明をエラーと比べ、何が誤っているかを伝えているか、それとも入力形式のようなヒントのテキストにすぎないかを判断してください。
  4. 同じエラーテキストがフィールドの近くの画面上に表示されていることを確認してください。

満たす場合：フィールドの説明またはほかの表示されているテキストがエラーを言葉で伝えているため、晴眼者もスクリーンリーダーの利用者も何が誤っているかがわかります。

満たさない場合：説明はヒントのテキストにすぎず、エラーを説明する表示テキストもないため、WCAG 3.3.1を満たしません。

ERROR_MESSAGE_TARGET_MISSING

  1. レポートに示されたフィールドを見つけ、aria-errormessage属性にあるidを控えてください。
  2. エラーを発生させ（フォームを送信するか無効な値を入力し）、[Elements]パネルでそのidを持つ要素を検索してください。
  3. 要素が現れたら、それが表示されていて、エラーを説明するテキストを持っていることを確認してください。
  4. 要素が現れない場合は、フィールドの近くやラベルに、何が誤っているかを伝えるほかの表示テキストがないか探してください。

満たす場合：フィールドがエラーになると、そのidを持つ表示されたメッセージまたはほかの表示テキストがエラーを説明します。

満たさない場合：フィールドは無効とマークされていますが、エラーを説明するテキストがないため、WCAG 3.3.1を満たしません。

NO_ERROR_MESSAGE

  1. レポートに示されたフィールドを見つけてください。aria-invalidが付いています。
  2. フィールドが現在本当にエラーなのか確認してください。利用者が何も入力していないうちから無効とマークされている場合は、有効な値を入力し、マークが消えるか確認してください。
  3. フィールドのラベルとその隣のテキスト、およびページ上のエラーの概要に、このフィールドを示して何が誤っているかを伝える言葉があるか確認してください。
  4. スクリーンリーダーを起動した状態でフィールドにフォーカスを移し、エラーが読み上げられるかを控えてください。

満たす場合：表示テキストがエラーのフィールドを特定して何が誤っているかを説明しているか、フィールドは実際にはエラーではありません。

満たさない場合：フィールドはエラーですが、それを特定して問題を説明するテキストがないため、WCAG 3.3.1を満たしません。

ソースコードを見る