Element: ariaErrorMessageElements-Eigenschaft

Wert

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.

Beschreibung

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 mit gültigen In-Scope-Elementen übereinstimmen. Wenn die Eigenschaft gesetzt wird, wird das entsprechende Attribut geleert. Weitere Informationen über reflektierte Elementreferenzen und den Geltungsbereich finden Sie unter Reflektierte Elementreferenzen im Reflected attributes-Leitfaden.

Beispiele

E-Mail-Eingabe mit Fehlermeldung

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 abrufen und festlegen können.

HTML

Zuerst definieren wir eine HTML-E-Mail-Eingabe und setzen das aria-errormessage-Attribut, um auf ein Element mit der id err1 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" 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 zu verbergen, sie jedoch sichtbar und als Fehler gestaltet zu machen, wenn aria-invalid auf dem Element gesetzt wird.

.errormessage {
  visibility: hidden;
}

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

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

JavaScript

Dann überprüfen wir die Eingabe 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 ein- und ausblendet.

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 protokollieren 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}`);
} 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. Bitte beachten Sie, dass das Protokoll die Fehlermeldungsreferenz zeigt, die aus dem Attribut gelesen wurde, das Element aus ariaErrorMessageElements und den inneren Text des Elements, der seine Fehlermeldung ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• aria-errormessage-Attribut
• ElementInternals.ariaErrorMessageElements
• Reflektierte Elementreferenzen im Attribute reflection-Leitfaden.