Verständliche Fehlermeldungen in Formularen

WCAG 3.3.1, 3.3.3, 1.4.1, 4.1.3 · mittel · etwa 60 Minuten · Stand 08.11.2026

Worum es geht

Im Checkout passiert es oft: Eine Postleitzahl hat einen Tippfehler, ein Pflichtfeld ist leer, und das Formular wird nicht abgeschickt. Häufig färbt der Shop dann nur den Feldrahmen rot oder zeigt eine allgemeine Meldung wie "Bitte Eingaben prüfen". WCAG 3.3.1 verlangt, dass ein erkannter Fehler als Text beschrieben wird und das betroffene Feld benannt ist. Nach 3.3.3 soll die Meldung, wenn möglich, sagen, wie man den Fehler behebt.

Wen es betrifft

Blinde Menschen mit Screenreader. Ein roter Rahmen wird nicht vorgelesen, und eine Meldung oben auf der Seite bemerken sie nicht, wenn sie nicht angesagt wird.
Menschen mit Farbsehschwäche, die Rot und Grün schlecht unterscheiden (1.4.1).
Menschen mit kognitiven Einschränkungen oder Leseschwierigkeiten, die eine konkrete Anleitung brauchen, um den Fehler zu verstehen.
Menschen mit Sehbehinderung, die mit Vergrößerung arbeiten und nur einen Ausschnitt der Seite sehen.

So behebst du es

Fehler als Text beim Feld anzeigen. Die Meldung steht direkt am Feld und nennt, was falsch ist und was richtig wäre.

Schlecht:

<label for="plz">Postleitzahl</label>
<input type="text" id="plz" style="border-color: red">

Gut:

<label for="plz">Postleitzahl</label>
<input type="text" id="plz" name="plz" autocomplete="postal-code"
       aria-invalid="true" aria-describedby="plz-fehler">
<p id="plz-fehler" class="fehler">
  Fehler: Die Postleitzahl muss aus fünf Ziffern bestehen, zum Beispiel 10115.
</p>

aria-invalid="true" sorgt dafür, dass der Screenreader das Feld als "ungültig" ansagt. aria-describedby verknüpft die Meldung mit dem Feld, sie wird beim Fokus vorgelesen.

Nicht nur Farbe verwenden. Ergänze die rote Farbe durch Text wie "Fehler:" oder ein Icon mit Textalternative. Die Meldung braucht ausreichenden Kontrast zum Hintergrund.
```
.fehler {
  color: #b00020; /* etwa 7:1 auf Weiß */
  font-weight: bold;
}
```
Konkrete Hinweise geben (3.3.3). Statt "Ungültige Eingabe" lieber "Bitte gib eine E-Mail-Adresse mit @ ein, zum Beispiel name@beispiel.de". Wenn ein Datum ein bestimmtes Format braucht, nenne das Format schon im Label oder Hinweistext, nicht erst im Fehlerfall.
Bei mehreren Fehlern eine Zusammenfassung zeigen. Nach dem Absenden erscheint oben im Formular eine Liste mit Links zu den betroffenen Feldern. Setze den Fokus auf die Überschrift der Liste, damit Tastatur- und Screenreader-Nutzende sie sofort finden.
```
<div id="fehlerliste" tabindex="-1">
  <h2>Bitte korrigiere 2 Angaben</h2>
  <ul>
    <li><a href="#plz">Postleitzahl: fünf Ziffern eingeben</a></li>
    <li><a href="#email">E-Mail-Adresse: @ fehlt</a></li>
  </ul>
</div>
```
```
document.getElementById('fehlerliste').focus();
```
Passe auch den Seitentitel an, zum Beispiel "Fehler: Kasse, Mein Shop", wenn die Seite nach dem Absenden neu lädt.
Meldungen ohne Fokuswechsel ansagen (4.1.3). Wenn du beim Verlassen eines Felds sofort prüfst und eine Meldung einblendest, ohne den Fokus zu verschieben, muss der Screenreader davon erfahren. Dafür eignet sich ein Bereich mit role="alert" oder aria-live. Der Container muss beim Laden der Seite schon vorhanden sein, der Text wird später eingefügt.
```
<p id="email-fehler" role="alert"></p>
```
```
document.getElementById('email-fehler').textContent =
  'Fehler: Bei der E-Mail-Adresse fehlt das @-Zeichen.';
```
Nutze role="alert" sparsam. Wenn bei jedem Tastendruck eine Meldung erscheint, wird das schnell störend. Prüfe besser beim Verlassen des Felds oder beim Absenden.
Eingaben nicht löschen. Wenn das Formular mit Fehlern zurückkommt, bleiben die bereits richtigen Angaben erhalten.
Fehlermeldung entfernen, wenn alles stimmt. Setze aria-invalid wieder auf false oder entferne es und leere den Meldungstext.

So prüfst du es

Absichtlich Fehler machen: Schicke das Formular leer ab, gib eine falsche E-Mail-Adresse und eine zu kurze Postleitzahl ein. Steht bei jedem Feld eine verständliche Meldung als Text?
Graustufen-Test: Schalte in den Systemeinstellungen oder per Browser-Erweiterung auf Graustufen. Erkennst du die Fehler noch?
Screenreader: Fülle das Formular mit NVDA oder VoiceOver aus. Wird beim Absenden angesagt, dass etwas fehlt? Hörst du beim Fokus auf ein fehlerhaftes Feld "ungültig" und die Meldung?
Tastatur: Kannst du über die Links in der Fehlerliste direkt zu den Feldern springen?
Browser-Devtools: Prüfe im Bereich "Accessibility", ob die Beschreibung ("Description") des Felds den Fehlertext enthält.
axe DevTools prüft unter anderem, ob ARIA-Attribute wie aria-invalid und aria-describedby gültige Werte haben. Ob eine Meldung verständlich ist, kann kein Tool beurteilen.

Verständliche Fehlermeldungen in Formularen

Worum es geht

Wen es betrifft

So behebst du es

So prüfst du es

Mehr dazu