3.3.1 - Fehleridentifikation

A 2.0 Umsetzung

Ziel

Benutzer sollen klar und verständlich über Eingabefehler informiert werden, damit sie diese beheben können.

Beschreibung

• Wenn ein Eingabefehler erkannt wird, muss das fehlerhafte Element gekennzeichnet und eine Textbeschreibung des Fehlers bereitgestellt werden:
  • Identifizierung des fehlerhaften Elements.
  • Textuelle Beschreibung des Fehlers.

Anforderungen

Design

• Fehlermeldungen müssen gut sichtbar und barrierefrei gestaltet sein.
• Ergänzende visuelle Hinweise (z. B. Farben, Icons) können verwendet werden, müssen jedoch durch Text unterstützt werden.
• Positionierung der Fehlermeldungen so, dass sie für Benutzer leicht auffindbar sind (z. B. neben dem fehlerhaften Feld oder in einer Zusammenfassung am Formularanfang).

Umsetzung

• Nutzung von HTML-Attributen wie aria-invalid oder aria-required, um Felder mit Fehlern programmgesteuert zu kennzeichnen.
• Integration clientseitiger Validierungen und Echtzeit-Fehlermeldungen.
• Dynamisches Einfügen von Fehlertexten in das DOM.
• Unterstützung serverseitiger Validierungen, um Benutzer auch nach der Formularübermittlung über Fehler zu informieren.

Redaktion

• Fehlermeldungen sollten in einfacher, klarer Sprache formuliert sein und erklären, was falsch ist und wie der Fehler behoben werden kann.

Qualitätsmanagement

• Testen, ob alle Eingabefehler korrekt erkannt und beschrieben werden.
• Sicherstellen, dass Fehlermeldungen von unterstützenden Technologien (z. B. Screenreadern) korrekt interpretiert werden.
• Überprüfung auf Konsistenz und Verständlichkeit der Fehlermeldungen.

Code-Beispiele

Beispiel für HTML mit aria-invalid zur Fehlerkennzeichnung:

<form>
  <label for="email">E-Mail-Adresse:</label>
  <input type="email" id="email" aria-invalid="true" />
  <span id="error-email" class="error">Bitte geben Sie eine gültige E-Mail-Adresse ein.</span>
</form>

Beispiel für serverseitige Fehlermeldungen:

<form method="POST" action="/submit-form">
  <label for="username">Benutzername:</label>
  <input type="text" id="username" name="username" />
  <span class="error">Benutzername darf nicht leer sein.</span>
</form>

Weiterführende Links

• W3C-Dokumentation
• Zweiter Blick