Element: ariaErrorMessageElements-Eigenschaft

Ein Array von Unterklassen von HTMLElement. 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 beeinflussen den Wert der Eigenschaft nicht.

Die Eigenschaft ist eine flexible Alternative zur Verwendung des aria-errormessage-Attributs, um die Fehlermeldung für ein Element festzulegen. Im Gegensatz zu aria-errormessage müssen die dieser Eigenschaft zugewiesenen Elemente kein id-Attribut haben.

Die Eigenschaft spiegelt das aria-errormessage-Attribut des Elements wider, wenn es definiert ist, jedoch nur für aufgelistete Referenz-id-Werte, die zu gültigen, im Geltungsbereich befindlichen Elementen passen. Wenn die Eigenschaft gesetzt wird, wird das entsprechende Attribut geleert. Weitere Informationen zu reflektierten Elementreferenzen und Geltungsbereich finden Sie unter Reflected element references im Reflected attributes-Leitfaden.

Dieses Beispiel zeigt, wie wir aria-errormessage verwenden, um die Fehlermeldung für die Eingabe einer ungültigen E-Mail-Adresse festzulegen, und demonstriert, wie wir die Nachricht mit ariaErrorMessageElements erhalten und setzen können.

HTML

Zuerst definieren wir eine HTML-E-Mail-Eingabe und setzen ihr aria-errormessage-Attribut so, dass es auf ein Element mit der id err1 verweist. Wir definieren dann ein <span>-Element mit dieser id, das eine Fehlermeldung enthält.

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

CSS

Wir erstellen einige Styles, um die Fehlermeldung standardmäßig zu verbergen, aber dann sichtbar und als Fehler formatiert zu machen, wenn aria-invalid für das Element gesetzt ist.

.errormessage {
  visibility: hidden;
}

[aria-invalid="true"] {
  outline: 2px solid red;
}

[aria-invalid="true"] ~ .errormessage {
  visibility: visible;
}

JavaScript

Dann prüfen wir auf Eingaben und setzen ariaInvalid auf true oder false basierend auf der typeMismatch-Einschränkungsverletzung. ariaInvalid wird wiederum im aria-invalid-Attribut reflektiert, das den Fehler nach Bedarf verbirgt und anzeigt.

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

Dann protokollieren wir den Wert des aria-errormessage-Attributs, die ariaErrorMessageElements und den inneren Text der ariaErrorMessageElements.

log(`aria-errormessage: ${email.getAttribute("aria-errormessage")}`);
// Feature test for ariaErrorMessageElements
if ("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.trim()}`);
} 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 Fehlermeldungsreferenz zeigt, die aus dem Attribut gelesen wurde, das Element von ariaErrorMessageElements und den inneren Text des Elements, das seine Fehlermeldung ist.

• aria-errormessage-Attribut
• ElementInternals.ariaErrorMessageElements
• Reflected element references im Attribute reflection-Leitfaden.