Die Struktur barrierefreier Formulare: Fehlermeldungen

„Irren ist menschlich. Vorbeugen, Vorschläge machen und korrigieren ist göttlich.“ – Raghavendra Peri

Wenn wir bei Finanztransaktionen, Reise- und Unterhaltungsbuchungen oder beim Ausfüllen von Umfragen Nutzerdaten übermitteln, unterlaufen uns oft Fehler. Stellen wir uns vor, wir senden ein Formular dreimal ab, scheitern dabei aber jedes Mal, ohne den Grund dafür zu kennen. Ein Freund rät uns, die rot markierten Felder zu korrigieren. Ein anderer Freund sagt, wir sollten beim Geburtsdatum nach einem Häkchen Ausschau halten, das darauf hinweist, dass das Datumsformat nicht korrekt ist.

Auch wenn viele von uns mit diesen Farben und visuellen Hinweisen vertraut sind, können wir nicht davon ausgehen, dass alle Nutzer über Farben und andere visuelle Hinweise Bescheid wissen. Wenn es schon für Menschen ohne Behinderung häufig vorkommt, dass sie Formulare nicht korrekt ausfüllen können, frage ich mich, wie frustrierend dies für Menschen sein muss, die farbenblind sind, blind oder sehbehindert sind oder eingeschränkte kognitive Fähigkeiten haben und Hilfe benötigen, um diese komplexen Situationen zu verstehen.

Ein Formular kommt niemals ohne Fehlerprüfung aus, und ein barrierefreies Formular ist ohne barrierefreie Fehleranzeige niemals vollständig.

Nachdem wir nun ein wenig über Platzhalter, Pflichtfelder und die Erstellung barrierefreier Formulare mit nativem HTML gelernt haben, wollen wir uns nun mit der Formularvalidierung und der Fehlererkennung befassen. Falls Sie die anderen Beiträge dieser Reihe noch nicht gelesen haben, empfehlen wir Ihnen dringend, von vorne zu beginnen:

Was die Erkennung und Vermeidung von Formularfehlern angeht, bieten die Web Content Accessibility Guidelines (WCAG) Version 2.0 eine Reihe von Richtlinien, die wir umsetzen müssen.
WCAG 2.0 legt die folgenden Richtlinien für eine barrierefreie Formularvalidierung und Fehlererkennung fest:

Es gibt zwei Methoden zur Validierung von Formularen: die serverseitige Validierung und die clientseitige Validierung. Wir werden jede dieser Methoden näher betrachten und untersuchen, wie sie jeweils zu einer barrierefreien Benutzererfahrung beiträgt.

Serverseitige Validierung

Unter serverseitiger Validierung versteht man, dass die in einem Formular übermittelten Daten an einen Webserver gesendet und dort mithilfe von Skripten wie PHP, JSP, Perl usw. validiert werden. Bei einer serverseitigen Validierung wird die Seite, die das Formular enthält, aktualisiert. Falls Fehler auftreten, werden diese den Benutzern angezeigt. Dies ist eine der ältesten Methoden zur Validierung von Formularen.
Wenn eine serverseitige Validierung stattfindet und der Benutzer auf eine Seite weitergeleitet wird, um die Fehler zu identifizieren und zu korrigieren, befolgen Sie die folgenden Tipps, um die Benutzer über die Fehler zu informieren:

Ändern Sie den Titel der Seite: Nutzer, einschließlich Menschen mit Behinderungen, neigen dazu, den Seitentitel zu überprüfen, wenn die Seite aktualisiert wird oder wenn sie auf eine neue Seite weitergeleitet werden. Indem Sie sicherstellen, dass der Seitentitel den Text „Das Formular enthält Fehler“ enthält, können Nutzer sofort erkennen, dass auf der Seite Fehler vorliegen und die Validierung des Formulars fehlgeschlagen ist.
Weisen Sie dem Fehler eine Überschriftenebene zu: Fügen Sie eine Überschrift ein, vorzugsweise eine H1-Überschrift, damit Nutzer von assistiver Technologie direkt zum Fehler springen und ihn beheben können.
Gestalten Sie den Fehler optisch so, dass er sich von anderen Inhalten abhebt: So können alle Nutzer den Fehler leicht erkennen.
Stellen Sie sicher, dass Fehlermeldungen klar und aussagekräftig sind: Bei jedem Fehler muss angegeben werden, in welchem Formularfeld der Fehler vorliegt, und es muss ein kurzer Hinweis zur Behebung des Fehlers enthalten sein.
Fügen Sie einen Link innerhalb derselben Seite ein, damit Nutzer direkt zu dem Formularfeld springen können, in dem der Fehler auftritt.

Clientseitige Validierung

Unter clientseitiger Validierung versteht man, dass die Formularvalidierung vom Browser mithilfe von JavaScript durchgeführt wird. Diese Art der Validierung liefert den Benutzern während der Dateneingabe oder nach dem Absenden des Formulars sofortiges Feedback. In diesem Fall werden die Daten nicht zur Validierung an den Server gesendet.

Es gibt verschiedene Methoden, mit denen Fehler bei der clientseitigen Validierung den Benutzern angezeigt werden. Das Grundprinzip, Fehler sichtbar zu machen und den Benutzern angemessenes Feedback zur Behebung dieser Fehler zu geben, bleibt jedoch immer dasselbe.
Beachten Sie die folgenden Punkte, um die Benutzer bestmöglich über Fehler bei der clientseitigen Validierung zu informieren:

Stellen Sie die Fehler im Text dar.
Stellen Sie sicher, dass Fehlermeldungen klar und aussagekräftig sind, damit die Benutzer die Fehler beheben können.
Verwenden Sie keine rein visuellen Hinweise wie Farben oder Symbole, um die Formularfelder mit Fehlern zu kennzeichnen – wenn Farben oder Symbole verwendet werden, müssen Sie dieselben Informationen auch auf alternative Weise bereitstellen, damit sie für alle Nutzer zugänglich sind.
Den Fokus auf das erste Formularsteuerelement setzen, das den Fehler enthält, oder den Fokus auf die allgemeine Fehlermeldung setzen.
Ordnen Sie die Inline-Fehler mithilfe des Attributs „aria-describedby“ den Formularfeldern zu.
Geben Sie passende Vorschläge – wenn beispielsweise das E-Mail-Feld ungültig ist, zeigen Sie statt der Fehlermeldung „Ungültige E-Mail-Adresse“ die Meldung „Ungültige E-Mail-Adresse – geben Sie bitte example@yourdomain.com ein“ an.

Es gibt viele Faktoren, die zu einer erfolgreichen Formularübermittlung beitragen. Zwar bieten die WCAG 2.0 Richtlinien zur Einhaltung der Standards, doch diese haben ihre Grenzen. Es liegt in der Verantwortung von Entwicklern, Designern und Autoren von Inhalten, den Nutzern eine einfache und barrierefreie Erfahrung zu bieten. Auch wenn Sie die WCAG-Richtlinien einhalten, sollten Sie dennoch prüfen, ob Sie den Nutzern eine mühelose und reibungslose Erfahrung bieten. Gehen Sie noch einen Schritt weiter, um Ihre Formulare barrierefrei und benutzerfreundlich zu gestalten.

Wir freuen uns über Ihre Fragen, Anregungen und Ihr Feedback. Bitte teilen Sie uns mit, wenn Sie sich weitere Beiträge zu einem bestimmten Thema wünschen – wir werden diese dann in unseren zukünftigen Beiträgen aufgreifen.