aria-invalid im Formular
Ein Feld sagt, dass etwas nicht stimmt
Feld, Fehlermeldung, Beschriftung: drei Stellen im Formular mit Fehler.
Fehlerzustand im Bild
Der Fehler muss an drei Stellen ankommen
Sichtbarer Text, Feldzustand und Korrekturhinweis wechseln gemeinsam.
01 Vor der Prüfung
Noch keine Fehlermeldung
aria-invalid- nicht gesetzt
- Fehlertext
hidden
Ansage „E-Mail-Adresse, Eingabefeld“
02 Nach dem Absenden
Bitte eine vollständige E-Mail-Adresse eingeben.
aria-invalidtruearia-describedbymail-fehler
Ansage „E-Mail-Adresse, ungültige Eingabe. Bitte eine vollständige E-Mail-Adresse eingeben.“
03 Nach der Korrektur
Fehlermeldung wieder verborgen
aria-invalid- entfernt
- Fehlertext
hidden
Ansage „E-Mail-Adresse, Eingabefeld“
Die Verdrahtung des Fehlerfalls
Jede Verbindung hat genau eine Aufgabe.
<label for="mail">E-Mail-Adressearia-invalid="true"Validierung fehlgeschlagenaria-describedby="mail-fehler"verweist auf den AbsatzVier gültige Werte, zwei Einsatzgebiete
falsekein erkannter FehlerStandard, auch ohne AttributtrueValidierung fehlgeschlagentypisch für FormularegrammarGrammatikfehlerfür bearbeitbaren TextspellingRechtschreibfehlerfür bearbeitbaren Texterror, yes oder invalid sind keine gültigen Werte.
Das vollständige Feld
<form action="/newsletter" method="post" novalidate>
<label for="mail">E-Mail-Adresse</label>
<input id="mail" name="mail" type="email" required
autocomplete="email" aria-describedby="mail-fehler">
<p id="mail-fehler" class="fehler" hidden>
Bitte eine vollständige E-Mail-Adresse eingeben.
</p>
<button type="submit">Eintragen</button>
</form> Das sichtbare label gibt dem Feld seinen Namen. aria-describedby bleibt bestehen; hidden steuert, ob die Meldung verfügbar ist. Der Server muss Eingaben unabhängig davon prüfen.
Beide Richtungen im selben Skript
const formular = document.querySelector('form');
const feld = document.getElementById('mail');
const fehler = document.getElementById('mail-fehler');
function aktualisieren() {
const ungueltig = !feld.validity.valid;
fehler.hidden = !ungueltig;
if (ungueltig) feld.setAttribute('aria-invalid', 'true');
else feld.removeAttribute('aria-invalid');
return !ungueltig;
}
formular.addEventListener('submit', (ereignis) => {
if (aktualisieren()) return;
ereignis.preventDefault();
feld.focus();
});
feld.addEventListener('input', () => {
if (feld.hasAttribute('aria-invalid')) aktualisieren();
}); Erst ein fehlgeschlagenes Absenden setzt true. Beim Korrigieren nimmt dieselbe Funktion Attribut und Text wieder zurück. Der Fokus am Feld verbindet Name, Zustand und Korrekturhinweis zu einer Ansage.
So prüfen Sie den Zustandswechsel
- Leer absenden.Fokus und sichtbarer Text landen am Feld.
- Ansage prüfen.Name, „ungültig“ und Korrektur sind hörbar.
- Adresse ergänzen.Text und
aria-invalidverschwinden. - Erneut fokussieren.Die Ansage enthält keinen Fehler mehr.
Weiterarbeiten mit Primärquellen
WAI-ARIA: aria-invalidW3C: Fehlerfelder kennzeichnenW3C: Fehlermeldungen in Formularen
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Der Fehlerzustand trägt einen erfundenen Wert Regel aria-valid-attr-value
aria-invalid="error" gehört nicht zur Werteliste. Für einen gewöhnlichen Validierungsfehler gilt true; nach der Korrektur entfällt das Attribut.
Kritisch Ein Tippfehler im Attributnamen Regel aria-valid-attr
aria-invald ist kein ARIA-Attribut und wird ignoriert. Der Fehlerzustand des Feldes erreicht dann niemanden.
Kritisch Der Feldname steht daneben, nicht daran Regel label
Der sichtbare Text „E-Mail“ gehört technisch nicht zum Feld. Ein label mit for macht ihn zum Namen.
Zum Mitnehmen
Das Fehlerfeld, korrigiert
Ein gültiger Wert, eine richtige Schreibweise, ein verbundener Name.
Korrektur in 3 Schritten ansehen
Den Fehlerzustand mit true melden
Für gewöhnliche Validierungsfehler gilt true. Nach der Korrektur wird das Attribut entfernt; grammar und spelling sind eigene Fehlerarten.
KorrekturvergleichSchritt 1 · HTML Vorher
<input id="mail" type="email" aria-invalid="error" aria-describedby="mail-fehler"> <p id="mail-fehler">Bitte eine Adresse mit @ eingeben.</p>Nachher
<input id="mail" type="email" aria-invalid="true" aria-describedby="mail-fehler"> <p id="mail-fehler">Bitte eine Adresse mit @ eingeben.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Senden Sie das Formular mit leerer E-Mail. Ein Vorleseprogramm sagt am Feld „ungültige Eingabe“.
Den Attributnamen richtig schreiben
aria-invald wird stillschweigend übergangen. Ein Buchstabe entscheidet, ob der Fehlerzustand überhaupt ankommt.
KorrekturvergleichSchritt 2 · HTML Vorher
<input id="plz" name="plz" type="text" aria-invald="true">Nachher
<input id="plz" name="plz" type="text" aria-invalid="true">Markierte Zeilen wurden geändert
So prüfen Sie es Suchen Sie im Quelltext nach aria-. Jeder Name muss genau so in der ARIA-Liste stehen.
Die Beschriftung mit dem Feld verbinden
Ein label mit for gibt dem Feld seinen Namen. Ohne Namen bleibt auch eine richtige Fehlermeldung unverständlich.
KorrekturvergleichSchritt 3 · HTML Vorher
<span>E-Mail</span> <input id="mail" type="email" aria-invalid="true">Nachher
<label for="mail">E-Mail</label> <input id="mail" type="email" aria-invalid="true">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort „E-Mail“. Springt der Cursor ins Feld, ist der Name verbunden.