Ratgeber Überprüfe die Anzeige und Erklärung fehlerhafter Eingaben

Der Hinweis weist darauf hin, dass deine Website möglicherweise keine klaren und verständlichen Fehlermeldungen anzeigt, wenn Nutzer fehlerhafte Eingaben in Formularen machen. Eine gute Fehleranzeige sollte Nutzer sofort auf das Problem hinweisen und Anleitungen zur Korrektur geben.

• Schlechte Benutzererfahrung: Wenn Nutzer nicht verstehen, warum ihre Eingaben fehlerhaft sind, könnten sie das Formular frustriert abbrechen.
• Barrierefreiheitsprobleme: Menschen mit Behinderungen, insbesondere Nutzer von Screenreadern, könnten Schwierigkeiten haben, Fehler zu erkennen und zu beheben.
• Geringere Conversion-Rate: Fehlende oder unklare Fehlermeldungen können dazu führen, dass Nutzer die Seite verlassen, ohne das Formular abzuschließen.

1. Überprüfe vorhandene Fehlermeldungen:
   • Teste deine Formulare, indem du absichtlich fehlerhafte Eingaben machst, und prüfe, ob und wie Fehler angezeigt werden.
   • Achte darauf, ob die Fehlermeldungen klar und leicht verständlich sind.
2. Füge spezifische Fehlermeldungen hinzu:
   • Stelle sicher, dass jede Eingabeaufforderung eine eindeutige Fehlermeldung hat, die den Fehler beschreibt und erklärt, wie er behoben werden kann.
   • Beispiel für eine gute Fehlermeldung:
     „Bitte geben Sie eine gültige E-Mail-Adresse ein (z. B. name@domain.com).“
3. Verbinde Fehlermeldungen mit Eingabefeldern:
   • Nutze das Attribut aria-describedby, um die Fehlermeldungen mit den betroffenen Feldern zu verknüpfen.
   • Beispiel:

     <input type="email" id="email" aria-describedby="email-error">   
     <span id="email-error" class="error">Ungültige E-Mail-Adresse.</span>

4. Markiere fehlerhafte Felder visuell:
   • Nutze visuelle Hinweise wie eine rote Umrandung oder ein Icon, um fehlerhafte Felder hervorzuheben.
   • Beispiel:

     .error {   
         border: 2px solid red;   
     }

5. Stelle klare Anleitungen bereit:
   • Ergänze Hinweise darüber, welche Daten in einem Feld erwartet werden, um Fehler zu vermeiden.
   • Beispiel: „Das Passwort muss mindestens 8 Zeichen, einen Großbuchstaben und eine Zahl enthalten.“
6. Teste die Barrierefreiheit:
   • Stelle sicher, dass Fehlermeldungen von Screenreadern vorgelesen werden können. Teste dies mit Tools wie Axe oder Lighthouse.

Beispiele & Best Practices

• Allgemeine Fehlermeldungen: Vermeide ungenaue Meldungen wie „Fehlerhafte Eingabe“.
• Fehlende Verknüpfung: Nutze aria-describedby, um Fehlermeldungen mit Feldern zu verbinden.
• Unklare Anforderungen: Erkläre Nutzern klar, welche Eingaben erwartet werden.

• Nutze aria-describedby, um Fehlermeldungen barrierefrei zu machen.
• Verwende semantisches HTML und CSS, um fehlerhafte Felder visuell hervorzuheben.
• Stelle sicher, dass alle Fehlermeldungen sofort angezeigt werden und leicht verständlich sind.

• WCAG Richtlinien für Fehlermeldungen
• MDN Web Docs: HTML Form Validation
• Google Lighthouse für Barrierefreiheit