aria-conditional-attr
aria-errormessageにはfalse以外の値のaria-invalidを指定する必要があります
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と、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<input type="text" aria-invalid="true" aria-errormessage="err1"><span id="err1">Enter a valid email address.</span>
aria-invalid="true"があるので、aria-errormessageは実際に支援技術に公開されます。
<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
- レポートに示されたフィールドを調べ、aria-errormessageにあるidを控えてください。
- 無効な値を入力し(または必須フィールドを空のままにし)、送信するかフィールドから離れて、エラーが表示されるようにしてください。
- そのidを持つ要素にエラーテキストが表示されたか確認し、フィールドを再度調べてaria-invalid="true"があるか確認してください。
- スクリーンリーダーでフィールドに戻り、エラーメッセージが読み上げられるか聞いて確認してください。
- 入力欄でエラーが読み上げられない場合は、メッセージが表示された時点でフォーカスを動かさずに読み上げるなど、ページが別の方法で読み上げているか確認してください。スクリーンリーダーがメッセージ全体を読み上げる場合にだけ、それを認めます。
満たす場合:エラーが表示されると、入力欄で(aria-invalid="true"またはaria-describedby内のメッセージ)、または表示された時点で、スクリーンリーダーが読み上げます。エラーが表示されていなければ、公開すべきものはありません。
満たさない場合:エラーテキストは見えるがaria-invalidがないかfalseのままで、スクリーンリーダーが入力欄でも表示時にもメッセージを読み上げないため、WCAG 3.3.1 / 4.1.2を満たしません(ARIA21参照)。