Fluss

Ein Fehler steht dort, wo er entstanden ist

Geltung: universal · web, react-native

Warum

Eine Fehlermeldung sagt dem Nutzer, was er jetzt tun soll. Was das System nicht konnte, hilft ihm dabei nicht. „Ungültiges Format" sagt ihm nicht, was er ändern soll. „Bitte im Format TT.MM.JJJJ eingeben" sagt es ihm.

Deshalb steht der Fehler dort, wo der Nutzer handelt. Steht er weit weg von dem Feld, das er betrifft, muss der Nutzer die Verbindung selbst herstellen. Bei drei Fehlern in einem Formular muss er dann suchen.

Die Eingaben bleiben stehen. Das ist der wichtigste Punkt, und er wird am häufigsten verletzt. Leert ein Fehler das Formular, muss der Nutzer wegen eines Tippfehlers alles neu eingeben. Nach dem zweiten Mal macht er nicht weiter.

Ohne Live-Bereich erfährt ein Screenreader-Nutzer nie, dass gespeichert wurde oder dass es keine Treffer gibt.

Wann der Fehler kommt

Prüf ein Feld, wenn der Nutzer es verlässt. Beim Tippen meldet sich der Fehler zu früh, weil die Eingabe noch nicht fertig ist. Erst beim Absenden ist es zu spät, weil der Nutzer dann schon drei Felder weiter ist.

Das Feld nimmt dabei jede Eingabe an, siehe Was der Nutzer tippt oder einfügt, kommt an. Ist sie ungültig, markiert sich das Feld beim Verlassen und sagt, was fehlt.

Wo eine Meldung hingehört

Was passiert ist	Wo es steht
Eine Eingabe stimmt nicht	am Feld, direkt darunter, mit dem Feld markiert
Ein Bereich konnte nicht laden	im Bereich, an der Stelle des Inhalts, mit „nochmal versuchen"
Eine Aktion ist gelungen, das Ergebnis sieht man nicht	Kurzmeldung, die von selbst geht
Etwas ist außerhalb des Blicks passiert	Kurzmeldung
Der Nutzer ist im Begriff, etwas zu verlieren	Pop-up, siehe Ein Pop-up unterbricht, es führt nicht

Kein Pop-up für Eingabefehler. Das Pop-up verdeckt genau das Formular, in dem der Nutzer den Fehler beheben soll.

Kurzmeldungen

Eine Kurzmeldung (Toast) eignet sich, um zu bestätigen, dass etwas passiert ist, dessen Ergebnis man gerade nicht sieht. Gespeichert, verschickt, in den Papierkorb gelegt.

Dafür gelten drei Bedingungen:

Sie blockiert nichts und verlangt nichts. Wer sie übersieht, verliert nichts.
Sie ist nie der einzige Ort einer wichtigen Information. Was der Nutzer später noch braucht, gehört an eine bleibende Stelle.
Sie erscheint nicht für einen Fehler, den man an einem Feld beheben kann. Der gehört ans Feld.

Ist eine Handlung rückgängig zu machen, gehört das Angebot dazu in die Kurzmeldung („Gelöscht — rückgängig"). So nützt sie am meisten, weil dann keine Bestätigungsfrage vorher nötig ist.

Eine Kurzmeldung mit Handlung bleibt stehen, solange der Mauszeiger auf ihr liegt oder sie den Fokus hat, und sie ist per Tastatur erreichbar. Sonst ist das Angebot weg, bevor ein langsamer Nutzer es nutzen kann.

Was in einer Meldung steht

Was der Nutzer tun kann, in seiner Sprache.
Kein Fehlercode, kein technischer Wortlaut, keine Meldung aus dem System durchgereicht.
Keine Schuldzuweisung, weder an ihn noch an das System.
Bei einem Fehler, der nicht in seiner Hand liegt: was gerade gilt und wann er es erneut versuchen kann.

Hart und weich

Hart. Weich: polite oder assertive. Vorgabe polite.

Woran Du den Verstoß erkennst

Ein Eingabefehler erscheint als Pop-up.
Alle Fehler eines Formulars stehen gesammelt oben statt bei den Feldern.
Das Formular ist nach einem Fehler leer.
Eine technische Meldung steht ungefiltert in der Oberfläche.
Eine Kurzmeldung trägt eine Information, die der Nutzer später wieder braucht.
Es gibt eine Bestätigungsfrage für etwas, das man auch rückgängig machen könnte.
Eine Kurzmeldung mit „Rückgängig“ verschwindet nach fester Zeit, auch wenn die Maus auf ihr liegt.
Ein ungültiges Feld schweigt bis zum Absenden.
Die Fehlermeldung erscheint beim ersten Tastendruck.
Kurzmeldung ohne role="status" oder aria-live.
Trefferzahl ändert sich still.
Der Live-Bereich wird erst mit der Meldung eingefügt.

Grenzen

Fehler, die die ganze Anwendung betreffen (etwa keine Verbindung oder eine abgelaufene Anmeldung), gehören an eine Stelle, die über allem liegt. Sie betreffen kein einzelnes Feld, und der Nutzer muss sie sehen, bevor er weitertippt.

Fehler, die nach Der Fokus ist sichtbar und hat immer einen Ort ohnehin den Fokus bekommen.

Quelle

WCAG 4.1.3 Status Messages. Vercel › Feedback („Use polite aria-live for toasts/inline validation").