aria-invalid

Das aria-invalid Attribut wird verwendet, um anzuzeigen, dass der in ein Eingabefeld eingegebene Wert nicht dem Format oder Wert entspricht, das die Anwendung akzeptiert. Dies kann Formate wie E-Mail-Adressen oder Telefonnummern umfassen. aria-invalid kann auch verwendet werden, um darauf hinzuweisen, dass ein erforderliches Feld leer ist.

Das aria-invalid Attribut kann mit jedem typischen HTML-Formularelement verwendet werden und ist nicht auf Elemente beschränkt, denen eine ARIA-Rolle zugewiesen wurde.

Das Attribut sollte als Ergebnis eines Validierungsprozesses mit JavaScript gesetzt werden. Wenn ein Wert als ungültig oder außerhalb des Bereichs bestimmt wird, setzen Sie aria-invalid="true" und informieren Sie den Benutzer über den Fehler. Für eine bessere Benutzererfahrung geben Sie Vorschläge, wie der Fehler behoben werden kann. Setzen Sie aria-invalid="true" nicht auf leeren erforderlichen Elementen, bevor der Benutzer versucht, das Formular abzusenden. Sie könnten noch dabei sein, es auszufüllen.

Derzeit gibt es vier Werte: neben true und false haben wir grammar, das verwendet werden kann, wenn ein grammatikalischer Fehler erkannt wird, und spelling für Rechtschreibfehler. Wenn das Attribut nicht vorhanden ist oder sein Wert false ist oder sein Wert eine leere Zeichenfolge ist, gilt der Standardwert false. Jeder andere Wert wird so behandelt, als wäre true gesetzt.

HTML verfügt über eine native Formularvalidierung. Wenn ein Benutzer ein Formular mit einem fehlerhaften Steuerelement absendet, zeigt das erste Formularsteuerelement mit einem ungültigen Wert eine Fehlermeldung an, nativ.

Wenn ein required Attribut auf einem Formularsteuerelement vorhanden ist, das nicht ausgefüllt ist, wird das Formular nicht abgesendet, und eine Fehlermeldung erscheint mit der Aufforderung "Bitte füllen Sie dieses Feld aus" oder etwas Ähnlichem. Die Nachrichten für die native Validierung variieren je nach Browser und können nicht gestylt werden.

<input type="number" step="2" min="0" max="100" required />

Wenn der Benutzer im obigen Beispiel einen Wert eingegeben hätte, der den Maximalwert überschreitet, unter dem Minimalwert liegt oder nicht dem Schrittwert entspricht, würde eine Fehlermeldung erscheinen. Hätte der Benutzer "3" eingegeben, wäre die native Fehlermeldung ähnlich wie "Bitte geben Sie einen gültigen Wert ein."

Wenn Sie eigene Skripte zur Formularvalidierung erstellen, stellen Sie sicher, dass aria-invalid auf ungültigen Formularsteuerelementen enthalten ist, zusammen mit Styling (Verwenden Sie den [aria-invalid="true"] Attributselektor) und Nachrichten (mit aria-errormessage), um Benutzern zu helfen, zu verstehen, wo der Fehler liegt und wie er behoben werden kann.

grammar

Ein grammatikalischer Fehler wurde erkannt.

false (Standard)

Es wurden keine Fehler im Wert erkannt.

spelling

Ein Rechtschreibfehler wurde erkannt.

true

Der vom Benutzer eingegebene Wert hat die Validierung nicht bestanden.

Jeder Wert, der nicht in dieser Liste ist, wird als true behandelt.

Der folgende Ausschnitt zeigt eine vereinfachte Version von zwei Formularfeldern mit einer an das Blur-Ereignis gebundenen Validierungsfunktion. Beachten Sie, dass es nicht zwingend erforderlich ist, das Attribut zum Eingang hinzuzufügen, da der Standardwert für aria-invalid false ist.

<ul>
  <li>
    <label for="name">Full Name</label>
    <input
      type="text"
      name="name"
      id="name"
      aria-required="true"
      aria-invalid="false"
      onblur="checkValidity('name', ' ', 'Invalid name entered (requires both first and last name)');" />
  </li>
  <li>
    <label for="email">Email Address</label>
    <input
      type="email"
      name="email"
      id="email"
      aria-required="true"
      aria-invalid="false"
      onblur="checkValidity('email', '@', 'Invalid email address');" />
  </li>
</ul>

Beachten Sie, dass es nicht notwendig ist, die Felder sofort beim Verlassen zu validieren; die Anwendung könnte warten, bis das Formular übermittelt wird (auch wenn dies nicht unbedingt empfohlen wird).

Der folgende Ausschnitt zeigt eine Validierungsfunktion, die nur auf das Vorhandensein eines bestimmten Zeichens prüft (in der realen Welt wird die Validierung wahrscheinlich anspruchsvoller sein):

function checkValidity(id, searchTerm, msg) {
  const elem = document.getElementById(id);
  if (elem.value.includes(searchTerm)) {
    elem.setAttribute("aria-invalid", "false");
    updateAlert();
  } else {
    elem.setAttribute("aria-invalid", "true");
    updateAlert(msg);
  }
}

Der folgende Ausschnitt zeigt die Alarmfunktionen, die die Fehlermeldung hinzufügen (oder entfernen):

function updateAlert(msg) {
  const oldAlert = document.getElementById("alert");
  if (oldAlert) {
    oldAlert.remove();
  }

  if (msg) {
    const newAlert = document.createElement("div");
    newAlert.setAttribute("role", "alert");
    newAlert.setAttribute("id", "alert");
    const content = document.createTextNode(msg);
    newAlert.appendChild(content);
    document.body.appendChild(newAlert);
  }
}

Beachten Sie, dass der Alarm das ARIA-Rollenattribut auf alert gesetzt hat.

Verwendet in Rollen:

• application
• checkbox
• combobox
• gridcell
• listbox
• radiogroup
• slider
• spinbutton
• textbox
• tree

Geerbt in Rolle:

• columnheader
• rowheader
• searchbox
• switch
• treegrid

• aria-errormessage
• CSS :valid Pseudoklasse
• CSS :invalid Pseudoklasse
• Formularvalidierung Tutorial