DieariaErrorMessageElements-Eigenschaft derElement-Schnittstelle ist ein Array, das das Element (oder die Elemente) enthält, die eine Fehlermeldung für das Element bereitstellen, auf das sie angewendet wird.

Das Themaaria-errormessage enthält zusätzliche Informationen darüber, wie das Attribut und die Eigenschaft verwendet werden sollten.

Wert

Ein Array von Unterklassen vonHTMLElement.Der innere Text dieser Elemente kann mit Leerzeichen verbunden werden, um die Fehlermeldung zu erhalten.

Beim Lesen ist das zurückgegebene Array statisch und schreibgeschützt.Beim Schreiben wird das zugewiesene Array kopiert: Nachfolgende Änderungen am Array beeinträchtigen den Wert der Eigenschaft nicht.

Beschreibung

Die Eigenschaft ist eine flexible Alternative zur Verwendung desaria-errormessage-Attributs, um die Fehlermeldung für ein Element festzulegen.Anders alsaria-errormessage müssen die dieser Eigenschaft zugewiesenen Elemente keinid-Attribut haben.

Die Eigenschaft spiegelt dasaria-errormessage-Attribut des Elements wider, wenn es definiert ist, jedoch nur für aufgelistete ID-Referenzwerte, die mit gültigen in-Scope-Elementen übereinstimmen.Wenn die Eigenschaft gesetzt ist, wird das entsprechende Attribut gelöscht.Weitere Informationen zu reflektierten Elementreferenzen und Bereichen finden Sie unterReflektierte Elementreferenzen imReflektierte Attribute Leitfaden.

Beispiele

E-Mail-Eingabe mit Fehlermeldung

Dieses Beispiel zeigt, wie wiraria-errormessage verwenden, um die Fehlermeldung für die Meldung der Eingabe einer ungültigen E-Mail-Adresse festzulegen, und demonstriert, wie wir die Nachricht mitariaErrorMessageElements abrufen und festlegen können.

HTML

Zuerst definieren wir eine HTML-E-Mail-Eingabe und setzen ihraria-errormessage-Attribut, um auf ein Element mit deriderr1 zu verweisen.Dann definieren wir ein<span>-Element, das diese ID hat und eine Fehlermeldung enthält.

<p>  <label for="email">Email address:</label>  <input type="email" name="email" aria-errormessage="err1" />  <span>Error: Enter a valid email address</span></p>

CSS

Wir erstellen einige Stile, um die Fehlermeldung standardmäßig auszublenden, sie jedoch sichtbar und als Fehler formatiert anzuzeigen, wennaria-invalid auf dem Element gesetzt ist.

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

JavaScript

Wir überprüfen dann die Eingabe und setzenariaInvalid auftrue oderfalse basierend auf demtypeMismatch-Einschränkungsverstoß.ariaInvalid wird wiederum imaria-invalid-Attribut widergespiegelt, das den Fehler bei Bedarf ausblendet und anzeigt.

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

<pre></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;}

Wir protokollieren dann den Wert desaria-errormessage-Attributs, dieariaErrorMessageElements und den inneren Text derariaErrorMessageElements.

log(`aria-errormessage: ${email.getAttribute("aria-errormessage")}`);// Feature test for ariaErrorMessageElementsif ("ariaErrorMessageElements" in Element.prototype) {  // Get ariaErrorMessageElements  const propElements = email.ariaErrorMessageElements;  log(`ariaErrorMessageElements: ${propElements}`);  // Accessible text from element inner text  const text = propElements.map((e) => e.textContent.trim()).join(" ");  log(`Error message details: ${text}`);} else {  log("element.ariaErrorMessageElements: not supported by browser");}

Ergebnis

Während Sie eine E-Mail-Adresse eingeben, wird der Fehlertext angezeigt, bis die E-Mail-Adresse gültig ist. Beachten Sie, dass das Protokoll die von dem Attribut gelesene Fehlermeldungsreferenz, das Element vonariaErrorMessageElements und den inneren Text des Elements zeigt, welcher seine Fehlermeldung ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• aria-errormessage-Attribut
• ElementInternals.ariaErrorMessageElements
• Reflektierte Elementreferenzen imAttributreflexion Leitfaden.