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 beeinträchtigen 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. Anders als 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 in-Scope-Elementen übereinstimmen. Wenn die Eigenschaft gesetzt ist, wird das entsprechende Attribut gelöscht. Weitere Informationen zu reflektierten Elementreferenzen und Bereichen finden Sie unter Reflektierte Elementreferenzen im Reflektierte Attribute Leitfaden.

Beispiele

E-Mail-Eingabe mit Fehlermeldung

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

HTML

Zuerst definieren wir eine HTML-E-Mail-Eingabe und setzen ihr 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 auszublenden, sie jedoch sichtbar und als Fehler formatiert anzuzeigen, wenn aria-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 setzen ariaInvalid auf true oder false basierend auf dem typeMismatch-Einschränkungsverstoß. ariaInvalid wird wiederum im aria-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 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. Beachten Sie, dass das Protokoll die von dem Attribut gelesene Fehlermeldungsreferenz, das Element von ariaErrorMessageElements und den inneren Text des Elements zeigt, welcher seine Fehlermeldung ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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