このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Element: ariaErrorMessageElements プロパティ

Baseline 2025
Newly available

Since ⁨April 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

ariaErrorMessageElementsElement インターフェイスのプロパティで、適用先の要素に対してエラーメッセージを提供する要素(または要素群)を含む配列です。

aria-errormessage のトピックには、この属性とプロパティの使用方法に関する追加情報があります。

HTMLElement のサブクラスの配列です。 これらの要素の内部テキストは、空白で連結することで、エラーメッセージになります。

読み取り時には、返される配列は静的で読み取り専用です。 書き込み時には、代入された配列はコピーされます。その後配列に変更を加えても、プロパティの値には影響しません。

解説

このプロパティは、要素のエラーメッセージを設定するための aria-errormessage 属性の柔軟な代替手段です。 aria-errormessage とは異なり、このプロパティに割り当てる要素は id 属性を持つ必要がありません。

このプロパティは、定義されている場合に要素の aria-errormessage 属性を反映しますが、有効なスコープ内要素と一致する参照先の id 値に対してのみ反映されます。 このプロパティを設定すると、対応する属性がクリアされます。 反映される要素への参照とスコープに関するより詳細な情報については、「属性の反映」ガイドの要素の参照の反映を参照してください。

エラーメッセージ付きのメールアドレス入力

この例では、無効なメールアドレスの入力報告用のエラーメッセージを設定するために aria-errormessage を使用する方法を示し、ariaErrorMessageElements を使用してメッセージを取得および設定する方法を説明します。

HTML

まず、HTML メール入力フィールドを定義し、その aria-errormessage 属性を iderr1 の要素を参照するように設定します。 次に、この ID を持つ <span> 要素を定義し、その中にエラーメッセージを含めます。

html

CSS

既定ではエラーメッセージを非表示にするスタイルを生成しますが、要素に aria-invalid 属性が設定された場合に限り、エラーとして表示され、スタイル設定が適用されるようにします。

css

JavaScript

次に、入力を調べ、typeMismatch 制約違反に基づいて ariaInvalidtrue または false に設定します。 ariaInvalidaria-invalid 属性に反映する処理を行い、必要があればエラーを非表示にしたり表示させたりします。

js

次に、aria-errormessage 属性を用いた値、ariaErrorMessageElementsariaErrorMessageElements の内部テキストをログ出力します。

js

結果

メールアドレスを入力すると、有効なメールアドレスが入力されるまでエラーテキストが表示されます。 なお、ログ出力する際には、属性から読み込まれたエラーメッセージ参照、ariaErrorMessageElements の要素、およびその要素の内部テキスト、つまりエラーメッセージ自体を表示します。

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# dom-ariamixin-ariaerrormessageelements

ブラウザーの互換性

関連情報