Barrierefreie Formulare: Warum Beschriftungen und Fehlermeldungen wichtig sind

Warum sind Beschriftungen und Fehlermeldungen bei barrierefreien Formularen wichtig?

Beschriftungen erklären, welche Information in ein Formularfeld gehört. Fehlermeldungen zeigen, welche Eingabe nicht verarbeitet werden konnte und wie sie korrigiert werden kann. Fehlen diese Informationen oder sind sie nur optisch erkennbar, können Menschen mit Sehbehinderungen, motorischen Einschränkungen oder kognitiven Beeinträchtigungen ein Formular möglicherweise nicht vollständig bedienen.

Eine sichtbare Feldbezeichnung allein genügt nicht, wenn sie technisch nicht mit dem Eingabefeld verbunden ist. Umgekehrt kann eine nur für assistive Technik hinterlegte Bezeichnung für andere Besucher schwer verständlich sein. Gute Formulare verbinden deshalb sichtbare, eindeutige Texte mit einer korrekten technischen Zuordnung.

Davon profitieren nicht nur Nutzer von Screenreadern. Verständliche Beschriftungen, erkennbare Pflichtfelder und konkrete Fehlerhinweise reduzieren Missverständnisse für alle Besucher. Das kann Abbrüche vermeiden und die Qualität von Kontaktanfragen, Bestellungen oder Registrierungen verbessern. Der W3C-Leitfaden zu barrierefreien Formularen behandelt diese Anforderungen von der Beschriftung bis zur erfolgreichen Übermittlung.

Wie werden Formularfelder eindeutig beschriftet?

Jedes Eingabefeld benötigt eine Bezeichnung, die seinen Zweck verständlich beschreibt. Begriffe wie „Name“, „E-Mail-Adresse“, „Telefonnummer“ oder „Ihre Nachricht“ sind normalerweise klarer als interne Bezeichnungen, Abkürzungen oder allgemeine Texte wie „Eingabe“. Bei mehreren Namens- oder Adressfeldern muss erkennbar sein, welche konkrete Angabe jeweils erwartet wird.

Die sichtbare Beschriftung sollte technisch mit dem zugehörigen Eingabefeld verbunden sein. Bei normalen HTML-Formularen geschieht dies üblicherweise über ein Label-Element, dessen Zuordnung genau zum betreffenden Feld passt. Dadurch kann ein Screenreader die Bezeichnung beim Erreichen des Feldes ausgeben. Gleichzeitig vergrößert eine anklickbare Beschriftung die Bedienfläche, was beispielsweise bei Kontrollkästchen und Auswahlfeldern hilfreich ist.

Ein Platzhalter innerhalb eines Feldes ist kein gleichwertiger Ersatz für eine Beschriftung. Er kann beim Beginn der Eingabe verschwinden, einen zu geringen Kontrast besitzen oder mit einer bereits eingetragenen Antwort verwechselt werden. Hinweise wie ein gewünschtes Datumsformat können ergänzend im oder am Feld erscheinen, die eigentliche Feldbezeichnung sollte jedoch dauerhaft erkennbar bleiben.

Auch Schaltflächen benötigen verständliche Namen. „Anfrage senden“, „Termin auswählen“ oder „Bestellung abschließen“ beschreibt die jeweilige Aktion besser als „OK“, „Weiter“ oder ein alleinstehendes Symbol. Weitere technische Beispiele bietet das W3C in seinen Hinweisen zur korrekten Beschriftung von Formularelementen.

Welche Hinweise benötigen Pflichtfelder, Eingabeformate und Feldgruppen?

Besucher sollten bereits vor der Eingabe erkennen können, welche Felder verpflichtend sind und welche Angaben freiwillig bleiben. Eine Kennzeichnung ausschließlich durch eine Farbe oder ein Sternchen ohne Erklärung ist nicht eindeutig. Sinnvoll ist eine verständliche textliche Angabe, die zusätzlich technisch am jeweiligen Feld hinterlegt wird.

Vorgaben zu Datum, Telefonnummer, Passwort oder Kundennummer müssen genannt werden, bevor ein Fehler entsteht. Erwartet ein Feld beispielsweise ein bestimmtes Datumsformat, sollte dieses direkt bei der Eingabe erläutert werden. Unnötig strenge Formatvorgaben sind zu vermeiden, wenn verschiedene gebräuchliche Schreibweisen technisch verarbeitet werden können.

Zusammengehörende Felder benötigen einen erkennbaren gemeinsamen Zusammenhang. Das betrifft insbesondere Gruppen von Kontrollkästchen und Optionsfeldern. Eine übergeordnete Frage oder Bezeichnung muss sowohl optisch als auch technisch der gesamten Gruppe zugeordnet sein. Bei längeren Formularen helfen zusätzliche Abschnittsüberschriften dabei, persönliche Daten, Kontaktdaten und inhaltliche Angaben voneinander zu unterscheiden.

Allgemeine Hinweise gehören möglichst vor das Formular oder an den Beginn des betreffenden Abschnitts. Feldbezogene Erklärungen müssen so eingebunden werden, dass assistive Technik sie gemeinsam mit dem Feld erfassen kann. Das W3C erläutert diese Zuordnung in seinen Empfehlungen zu Formularhinweisen und Eingabeformaten.

Wie müssen verständliche Fehlermeldungen aufgebaut sein?

Eine Fehlermeldung sollte das betroffene Feld benennen, den Fehler verständlich erklären und nach Möglichkeit eine konkrete Korrektur nennen. „Die E-Mail-Adresse enthält kein gültiges Format“ hilft stärker als „Ungültige Eingabe“ oder ein allgemeines „Es ist ein Fehler aufgetreten“. Erwartete Formate oder fehlende Pflichtangaben sollten direkt aus der Meldung hervorgehen.

Fehler dürfen nicht ausschließlich durch eine rote Umrandung, ein Warnsymbol oder eine veränderte Hintergrundfarbe vermittelt werden. Diese Merkmale können ergänzend eingesetzt werden, benötigen aber eine textliche Information. Die Meldung sollte technisch mit dem betreffenden Formularfeld verbunden sein, damit sie beim Erreichen des Feldes von assistiver Technik ausgegeben werden kann.

Enthält ein Formular mehrere Fehler, kann eine zusammenfassende Fehlerliste am Formularanfang zusätzliche Orientierung bieten. Die einzelnen Hinweise sollten zu den betroffenen Feldern führen und dort erneut verfügbar sein. Bei dynamisch eingeblendeten Meldungen muss sichergestellt werden, dass Screenreader die Änderung wahrnehmen können. Die W3C-Hinweise zu Formularmeldungen zeigen geeignete Formen für Fehlerlisten und Statusinformationen.

Bereits korrekt eingegebene Daten sollten nach einem Fehler möglichst erhalten bleiben. Besucher dürfen nicht gezwungen werden, das gesamte Formular erneut auszufüllen, nur weil eine einzelne Angabe fehlt. Die Validierung muss außerdem unabhängig davon zugänglich bleiben, ob sie unmittelbar im Browser oder erst nach dem Absenden auf dem Server erfolgt.

Was ist bei Tastaturbedienung, Fokus und Bestätigungen zu beachten?

Alle Felder, Auswahlmöglichkeiten und Schaltflächen müssen mit der Tastatur erreichbar und bedienbar sein. Die Reihenfolge sollte dem sichtbaren und inhaltlichen Aufbau des Formulars entsprechen. Ein deutlich erkennbarer Tastaturfokus zeigt, welches Element gerade aktiv ist. Eigene Auswahlfelder, Kalender oder Uploadfunktionen dürfen diese grundlegende Bedienbarkeit nicht unterbrechen.

Nach dem Absenden muss nachvollziehbar sein, was geschehen ist. Bei Fehlern kann der Fokus auf eine Fehlerzusammenfassung oder das erste fehlerhafte Feld gelenkt werden, sofern dies verständlich umgesetzt wird. Bei erfolgreicher Übermittlung benötigt der Besucher eine eindeutige Bestätigung, die auch von assistiver Technik erkannt wird.

Mehrstufige Formulare sollten den aktuellen Schritt und den verbleibenden Ablauf vermitteln. Vor- und Zurück-Funktionen müssen eingegebene Daten möglichst erhalten. Zeitbegrenzungen sind zu vermeiden oder so umzusetzen, dass ausreichend Zeit zur Verfügung steht und eine Verlängerung möglich ist.

Wie lassen sich vorhandene Website-Formulare überprüfen?

Eine zuverlässige Prüfung umfasst sowohl den sichtbaren Inhalt als auch die tatsächlich ausgegebene technische Struktur. Ein korrekt beschriftetes Feld im Backend ist noch kein Nachweis dafür, dass Pagebuilder, Formular-Plugin oder Theme die Zuordnung im HTML fehlerfrei ausgeben.

1. Alle Eingabefelder werden auf dauerhaft sichtbare und verständliche Beschriftungen geprüft.
2. Die technische Zuordnung zwischen Beschriftung, Eingabefeld, Hinweis und Fehlermeldung wird kontrolliert.
3. Pflichtfelder, erlaubte Formate und zusammengehörende Auswahlgruppen werden auf eindeutige Hinweise geprüft.
4. Das Formular wird vollständig mit der Tastatur bedient und die sichtbare Fokusreihenfolge nachvollzogen.
5. Unterschiedliche Fehler werden absichtlich ausgelöst und auf verständliche, feldbezogene Meldungen kontrolliert.
6. Die erfolgreiche Übermittlung wird einschließlich Bestätigung und möglicher E-Mail-Ausgabe getestet.

Automatisierte Prüfwerkzeuge können fehlende Beschriftungen, ungültige Zuordnungen oder bestimmte Kontrastprobleme erkennen. Ob eine Bezeichnung inhaltlich verständlich und eine Fehlermeldung tatsächlich hilfreich ist, muss jedoch manuell beurteilt werden. Ergänzende Tests mit Screenreader, Vergrößerung und unterschiedlichen Endgeräten liefern weitere Hinweise.

Nach Plugin-Updates, Änderungen am Formular oder einem Umbau des Seitentemplates sollte die Kontrolle wiederholt werden. Technische Funktionstests lassen sich in eine regelmäßige Website-Wartung einbinden. Werden Feldtexte, Hinweise oder Auswahlmöglichkeiten redaktionell verändert, sollte auch die laufende Website-Inhaltspflege die Verständlichkeit berücksichtigen.

Welche rechtlichen Anforderungen können für Formulare gelten?

Beschriftungen, Anweisungen, Fehlererkennung und Korrekturhinweise gehören zu den grundlegenden Anforderungen der WCAG. Ob eine konkrete Website diese Anforderungen aufgrund gesetzlicher Vorgaben erfüllen muss, hängt unter anderem vom Betreiber, vom angebotenen Dienst und vom Anwendungsbereich der jeweiligen Regelung ab.

Für öffentliche Stellen gelten besondere gesetzliche Anforderungen. Im privatwirtschaftlichen Bereich kann das seit dem 28. Juni 2025 anzuwendende Barrierefreiheitsstärkungsgesetz relevant sein, wenn über die Website erfasste Dienstleistungen für Verbraucher angeboten werden. Dazu können beispielsweise Funktionen gehören, die auf den Abschluss eines Verbrauchervertrages ausgerichtet sind. Das Gesetz erfasst jedoch nicht pauschal jedes Formular und jede Unternehmenswebsite.

Auch mögliche Ausnahmen, etwa für bestimmte Kleinstunternehmen bei Dienstleistungen, müssen berücksichtigt werden. Eine erste Einordnung bietet die FAQ der Bundesfachstelle Barrierefreiheit zum BFSG. Weitere Grundlagen finden Sie im Ratgeberbeitrag Was müssen Website-Betreiber zur Barrierefreiheit wissen?. Dieser Beitrag ersetzt keine individuelle Rechtsberatung.

Wann reicht eine eigene Überarbeitung und wann ist Unterstützung sinnvoll?

Einfache Beschriftungen, eindeutige Pflichtfeldhinweise und verständlichere Meldungstexte lassen sich häufig selbst überarbeiten. Voraussetzung ist, dass das eingesetzte Formularsystem die notwendigen technischen Zuordnungen korrekt unterstützt und das Ergebnis anschließend im ausgelieferten Formular geprüft wird.

Professionelle Unterstützung ist sinnvoll, wenn komplexe Mehrschrittformulare, Bestellvorgänge, Datei-Uploads, dynamische Validierungen oder individuelle Formularmodule eingesetzt werden. Gleiches gilt, wenn Beschriftungen im Screenreader fehlen, der Tastaturfokus verloren geht oder Fehlermeldungen trotz korrekter Einstellungen nicht zuverlässig angekündigt werden.

Über die Anfrage zur Website-Barrierefreiheit können Sie eine technische und inhaltliche Prüfung vorhandener Formulare sowie die Abstimmung notwendiger Korrekturen veranlassen.

Weitere Ratgeber

Passende Beiträge zum Thema

Weitere Ratgeber, die zu diesem Thema passen und bei Wartung, Sicherheit, Updates oder Backups weiterhelfen.