aria-conditional-attr

aria-errormessageにはfalse以外の値のaria-invalidを指定する必要があります

automaticWCAG 4.1.2 (A)確度:high重大度:moderaterobust

aria-errormessageを持つ要素に、aria-invalidが"true"、"grammar"、"spelling"のいずれかで指定されていることを確認します。指定されていないと、エラーメッセージはアクセシビリティツリーから除外されます。

適用範囲:空でないaria-errormessage属性を持つ要素。

期待される結果:ARIA仕様では、aria-errormessageが支援技術に公開されるのは、aria-invalidが"false"以外の値(つまり"true"、"grammar"、"spelling")で指定されている場合だけです。aria-errormessageがあってもaria-invalidがないか"false"の場合、エラーメッセージは何の通知もなくアクセシビリティツリーから除外されます。作成者はほぼ例外なく公開されることを意図しています。FAILではなくCANTTELLとして報告されます。aria-errormessageはaria-invalidが設定されて初めて公開されるため、現時点ではこの参照は機能していません。それがユーザーにとって実害になるかどうかは、メッセージが別の方法(フィールド横の可視テキストやaria-describedby)で伝わっているかどうかによりますが、静的なマークアップからはそれを判断できません。

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

  • ariaInvalid:要素のaria-invalidの値を小文字にしたものです。属性がない場合は空文字列です。

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

例

pass
<input type="text" aria-invalid="true" aria-errormessage="err1">
<span id="err1">Enter a valid email address.</span>

aria-invalid="true"があるので、aria-errormessageは実際に支援技術に公開されます。

can't tell
<input type="text" aria-errormessage="err1">
<span id="err1">Enter a valid email address.</span>

aria-invalidが"false"以外の値に設定されていないため、aria-errormessageは公開されず、この参照は現時点では機能していません。

確認方法

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

ARIA_ERRORMESSAGE_WITHOUT_TRUTHY_INVALID

  1. レポートに示されたフィールドを調べ、aria-errormessageにあるidを控えてください。
  2. 無効な値を入力し(または必須フィールドを空のままにし)、送信するかフィールドから離れて、エラーが表示されるようにしてください。
  3. そのidを持つ要素にエラーテキストが表示されたか確認し、フィールドを再度調べてaria-invalid="true"があるか確認してください。
  4. スクリーンリーダーでフィールドに戻り、エラーメッセージが読み上げられるか聞いて確認してください。
  5. 入力欄でエラーが読み上げられない場合は、メッセージが表示された時点でフォーカスを動かさずに読み上げるなど、ページが別の方法で読み上げているか確認してください。スクリーンリーダーがメッセージ全体を読み上げる場合にだけ、それを認めます。

満たす場合:エラーが表示されると、入力欄で(aria-invalid="true"またはaria-describedby内のメッセージ)、または表示された時点で、スクリーンリーダーが読み上げます。エラーが表示されていなければ、公開すべきものはありません。

満たさない場合:エラーテキストは見えるがaria-invalidがないかfalseのままで、スクリーンリーダーが入力欄でも表示時にもメッセージを読み上げないため、WCAG 3.3.1 / 4.1.2を満たしません(ARIA21参照)。

ソースコードを見る