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.
ariaErrorMessageElements
は Element
インターフェイスのプロパティで、適用先の要素に対してエラーメッセージを提供する要素(または要素群)を含む配列です。
aria-errormessage
のトピックには、この属性とプロパティの使用方法に関する追加情報があります。
値
HTMLElement
のサブクラスの配列です。
これらの要素の内部テキストは、空白で連結することで、エラーメッセージになります。
読み取り時には、返される配列は静的で読み取り専用です。 書き込み時には、代入された配列はコピーされます。その後配列に変更を加えても、プロパティの値には影響しません。
解説
このプロパティは、要素のエラーメッセージを設定するための aria-errormessage
属性の柔軟な代替手段です。
aria-errormessage
とは異なり、このプロパティに割り当てる要素は id
属性を持つ必要がありません。
このプロパティは、定義されている場合に要素の aria-errormessage
属性を反映しますが、有効なスコープ内要素と一致する参照先の id
値に対してのみ反映されます。
このプロパティを設定すると、対応する属性がクリアされます。
反映される要素への参照とスコープに関するより詳細な情報については、「属性の反映」ガイドの要素の参照の反映を参照してください。
例
>エラーメッセージ付きのメールアドレス入力
この例では、無効なメールアドレスの入力報告用のエラーメッセージを設定するために aria-errormessage
を使用する方法を示し、ariaErrorMessageElements
を使用してメッセージを取得および設定する方法を説明します。
HTML
まず、HTML メール入力フィールドを定義し、その aria-errormessage
属性を id
が err1
の要素を参照するように設定します。
次に、この ID を持つ <span>
要素を定義し、その中にエラーメッセージを含めます。
CSS
既定ではエラーメッセージを非表示にするスタイルを生成しますが、要素に aria-invalid
属性が設定された場合に限り、エラーとして表示され、スタイル設定が適用されるようにします。
JavaScript
次に、入力を調べ、typeMismatch
制約違反に基づいて ariaInvalid
を true
または false
に設定します。
ariaInvalid
は aria-invalid
属性に反映する処理を行い、必要があればエラーを非表示にしたり表示させたりします。
次に、aria-errormessage
属性を用いた値、ariaErrorMessageElements
、ariaErrorMessageElements
の内部テキストをログ出力します。
結果
メールアドレスを入力すると、有効なメールアドレスが入力されるまでエラーテキストが表示されます。
なお、ログ出力する際には、属性から読み込まれたエラーメッセージ参照、ariaErrorMessageElements
の要素、およびその要素の内部テキスト、つまりエラーメッセージ自体を表示します。
仕様書
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA)> # dom-ariamixin-ariaerrormessageelements> |
ブラウザーの互換性
Loading…
関連情報
aria-errormessage
属性ElementInternals.ariaErrorMessageElements
- 要素の参照の反映(「属性の反映」ガイド)