Element: ariaErrorMessageElements プロパティ

Baseline 2025

値

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

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

解説

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

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

例

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

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

HTML

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

html

<p>
 <label for="email">メールアドレス:</label>
 <input type="email" name="email" id="email" aria-errormessage="err1" />
 <span id="err1" class="errormessage">エラー: 有効なメールアドレスを入力してください</span>
</p>

CSS

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

css

.errormessage {
 visibility: hidden;
}
[aria-invalid="true"] {
 outline: 2px solid red;
}
[aria-invalid="true"] ~ .errormessage {
 visibility: visible;
}

JavaScript

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

const email = document.querySelector("#email");
email.addEventListener("input", (event) => {
 if (email.validity.typeMismatch) {
 email.ariaInvalid = true;
 } else {
 email.ariaInvalid = false;
 }
});

<pre id="log"></pre>

#log {
 height: 70px;
 overflow: scroll;
 padding: 0.5rem;
 border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
 logElement.innerText = `${logElement.innerText}${text}\n`;
 logElement.scrollTop = logElement.scrollHeight;
}

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

log(`aria-errormessage: ${email.getAttribute("aria-errormessage")}`);
// ariaErrorMessageElements の機能検出
if ("ariaErrorMessageElements" in Element.prototype) {
 // ariaErrorMessageElements を取得
 const propElements = email.ariaErrorMessageElements;
 log(`ariaErrorMessageElements: ${propElements}`);
 // 要素の内部テキストからアクセシブルテキストを作成
 const text = propElements.map((e) => e.textContent.trim).join(" ");
 log(`エラーメッセージ詳細: ${text.trim()}`);
} else {
 log("element.ariaErrorMessageElements: ブラウザーが対応していません");
}