Barrierefreie Formulare: Checkliste für Unternehmenswebsites

Ein Kontaktformular ist oft der letzte Schritt vor einer Anfrage. Fehlt eine verständliche Beschriftung, springt der Fokus unvorhersehbar oder bleibt eine Fehlermeldung rätselhaft, kostet das nicht nur Menschen mit Behinderungen Zeit. Auch andere Besucher brechen ab, weil sie nicht wissen, was erwartet wird oder wie sie einen Fehler korrigieren können.

Barrierefreie Formulare machen die Aufgabe klarer: Welche Angabe gehört wohin? Was ist Pflicht? Was ist beim Absenden schiefgelaufen? Das hilft bei Kontakt-, Termin-, Angebots- und Bewerbungsformularen gleichermaßen. Die folgenden Punkte sind eine technische und redaktionelle Checkliste, keine rechtliche Einzelfallbewertung.

Warum Formulare ein eigener Accessibility-Schwerpunkt sind

Eine Unternehmenswebsite kann bei Navigation und Textstruktur gut funktionieren und trotzdem im Formular scheitern. Dort treffen Eingabe, Validierung, Datenschutz-Hinweis, Auswahlfelder, Uploads und Rückmeldung aufeinander. Wer die Tastatur nutzt, Inhalte stark vergrößert, einen Screenreader verwendet oder nur schnell am Smartphone anfragt, braucht eindeutige Orientierung.

Das W3C-Formular-Tutorial fasst die Grundbausteine zusammen: Controls beschriften, zusammengehörende Auswahlfelder gruppieren, Hinweise geben, Eingaben validieren und Rückmeldungen verständlich ausgeben. Für Unternehmen ist das zugleich Conversion-Hygiene: Ein Formular soll nicht erst beim zweiten Versuch erklären, wie es funktioniert.

Jede Eingabe braucht einen sichtbaren Namen

Ein kurzer Hinweis wie „E-Mail“ im leeren Feld ist kein Ersatz für ein dauerhaft sichtbares Label. Der Text verschwindet beim Tippen, ist bei vielen Designs kontrastarm und kann die erwartete Eingabe nicht immer vollständig erklären. Besser ist eine sichtbare Beschriftung, die im HTML mit dem jeweiligen Feld verbunden ist.

Besonders bei aufgeteilten Angaben braucht jedes Teilfeld eine eigene Erklärung. Bei Vor- und Nachname reicht ein gemeinsames „Name“ nicht aus. Dasselbe gilt für Telefonnummern mit mehreren Feldern oder für Auswahlgruppen. Die WCAG-Erklärung zu Labels or Instructions nennt genau solche Fälle als typische Stolperstellen.

Auch die visuelle Gestaltung muss diese Struktur tragen. Labels dürfen nicht so weit vom Feld entfernt stehen, dass ihre Zuordnung beim Vergrößern verloren geht. Hilfetexte brauchen ausreichenden Kontrast und dürfen nicht verschwinden, sobald ein Feld aktiv wird. Wer ein Feld als optional kennzeichnet, sollte das ebenso klar schreiben wie eine Pflichtangabe.

Element	Woran Besucher es erkennen sollen	Praktische Umsetzung
Textfeld	Welche Information erwartet wird	Sichtbares <label> und passende Feldbezeichnung
Pflichtfeld	Ob eine Angabe notwendig ist	„Pflichtfeld“ als Text erklären, nicht nur mit Farbe oder Sternchen
Auswahlgruppe	Welche Optionen zusammengehören	<fieldset> und <legend> für etwa Anrede oder Rückrufwunsch
Formatvorgabe	Wie eine Angabe aussehen soll	Vor dem Absenden ein kurzes Beispiel oder einen Hinweis geben

Tastatur, Fokus und Reihenfolge testen

Ein Formular muss ohne Maus bedienbar sein. Mit der Tab-Taste sollte der Fokus in einer nachvollziehbaren Reihenfolge durch Felder, Checkboxen, Uploads, Datenschutz-Link und Absende-Button wandern. Der aktuell aktive Bereich braucht einen gut sichtbaren Fokuszustand; eine feine graue Umrandung reicht in der Praxis oft nicht.

Testen Sie dabei nicht nur die Eingabefelder. Häufig problematisch sind individuell gestaltete Radio-Buttons, Selects, Kalender und Upload-Komponenten. Sie sehen mit der Maus korrekt aus, reagieren aber mit der Tastatur nicht oder geben ihren Zustand nicht verständlich weiter.

Fehlermeldungen müssen sagen, was passiert ist

Rot markierte Felder allein helfen nicht allen Besuchern. Wenn eine Eingabe automatisch als fehlerhaft erkannt wird, soll die Meldung den Fehler in Text benennen. Die WCAG-Erklärung zu Error Identification macht deutlich, dass ein Formular nicht einfach erneut erscheinen darf, ohne zu erklären, welche Eingabe betroffen ist.

Hilfreich ist eine Meldung direkt am Feld, ergänzt durch eine Zusammenfassung am Anfang des Formulars, wenn mehrere Angaben fehlen. Formulierungen wie „Bitte geben Sie eine gültige E-Mail-Adresse im Format name@unternehmen.de ein“ sind besser als „Ungültige Eingabe“. Ist eine Korrektur bekannt und ohne Sicherheitsrisiko möglich, sollte sie auch genannt werden. Das entspricht der Einordnung zu Error Suggestion.

Native Browser-Validierung kann ein zusätzlicher Schutz sein, ersetzt aber keine eigene Prüfung. Browsertexte unterscheiden sich, sie zeigen oft nur den ersten Fehler und geben selten eine hilfreiche Korrekturmöglichkeit. Für wichtige Anfragewege empfiehlt sich daher eine sichtbare, im Frontend gesteuerte Validierung.

Checkliste für Kontakt- und Anfrageformulare

Vor dem Ausfüllen prüfen:

• Jedes Feld hat ein sichtbares, eindeutiges Label.
• Pflichtangaben sind als Text erklärt.
• Hinweise zu Format, Zeichenlänge oder Dateityp stehen vor der Eingabe bereit.
• Zusammengehörende Optionen sind als Gruppe erkennbar.
• Datenschutz-Information und Einwilligungen sind verständlich verlinkt und bedienbar.
• Das Formular fragt nur Angaben ab, die für die Anfrage wirklich nötig sind.

Beim Testen prüfen:

• Alle Elemente lassen sich per Tastatur erreichen und bedienen.
• Der Fokus bleibt gut sichtbar, auch bei dunklen oder farbigen Hintergründen.
• Die Tab-Reihenfolge folgt dem visuellen und fachlichen Ablauf.
• Fehlermeldungen nennen Feld und Ursache in Text, nicht nur über Farbe oder ein Symbol.
• Bei mehreren Fehlern gibt es eine verständliche Übersicht und der Weg zur Korrektur bleibt kurz.
• Nach dem erfolgreichen Absenden erscheint eine klare Bestätigung mit dem nächsten Schritt.

So lässt sich der Aufwand sinnvoll priorisieren

Beginnen Sie mit Formularen, die Einnahmen, Termine oder Bewerbungen beeinflussen. Ein einzelnes Formular mit 20 Anfragen im Monat ist oft wertvoller als eine selten genutzte Spezialfunktion. Danach folgen wiederkehrende Komponenten wie Newsletter-Anmeldungen, Login-Strecken oder Shop-Checkouts.

Ein kompakter Testlauf besteht aus vier Schritten: Formular ohne Maus ausfüllen, absichtlich mehrere Fehler erzeugen, Darstellung bei 200 Prozent Zoom prüfen und den Ablauf auf einem kleinen Smartphone testen. Für komplexe Formulare gehören zusätzlich Screenreader- und technische Codeprüfungen dazu. Das Ergebnis sollte nicht nur eine Liste von WCAG-Nummern sein, sondern konkrete Tickets mit Feld, Ursache, Auswirkung und Lösungsvorschlag.

Wer die gesamte Website priorisiert prüfen möchte, findet auf unserer Seite zur Barrierefreiheit von Websites den technischen Rahmen. Für die inhaltliche und gestalterische Überarbeitung von Anfragewegen kann auch Webdesign und Konzeption der passende Einstieg sein. Unser Ratgeber zum Kontaktformular optimieren zeigt zusätzlich, wie weniger Reibung zu besseren Anfragen führt.

Fazit: Gute Formulare erklären sich im richtigen Moment

Barrierefreie Formulare sind keine Zusatzschicht nach dem Design. Labels, Gruppen, Fokuszustände und verständliche Fehlermeldungen gehören zur Basis eines verlässlichen Anfragewegs. Wer diese Details mit realistischen Tests prüft, hilft mehr Besuchern beim Abschluss und erhält zugleich bessere, vollständigere Angaben.