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 wirken sich nicht auf den Wert der Eigenschaft aus.

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 id-Referenzwerte, die mit gültigen Elementen im Geltungsbereich übereinstimmen. Wenn die Eigenschaft gesetzt wird, wird das entsprechende Attribut gelöscht. Weitere Informationen zu gespiegelten Elementreferenzen und Geltungsbereichen finden Sie unter Reflected element references im Leitfaden Reflected attributes.

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

HTML

Zuerst definieren wir ein HTML-Eingabeelement für E-Mails und setzen sein aria-errormessage-Attribut, um ein Element mit der id von err1 zu referenzieren. Wir definieren dann ein <span>-Element, das diese ID hat und 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 Stile, um die Fehlermeldung standardmäßig auszublenden, sie jedoch sichtbar und als Fehler gestylt zu machen, wenn aria-invalid auf das Element gesetzt wird.

.errormessage {
  visibility: hidden;
}

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

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

JavaScript

Dann prüfen wir die Eingabe und setzen ariaInvalid auf true oder false basierend auf der typeMismatch-Einschränkungsverletzung. ariaInvalid wird wiederum im aria-invalid-Attribut widergespiegelt, das den Fehler je nach 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 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;
}

Wir loggen dann 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

Wenn Sie eine E-Mail-Adresse eingeben, wird der Fehlertext angezeigt, bis die E-Mail-Adresse gültig ist. Beachten Sie, dass das Log die Fehlermeldungsreferenz zeigt, die aus dem Attribut gelesen wurde, das Element aus ariaErrorMessageElements und den inneren Text des Elements, der seine Fehlermeldung ist.

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