Ein Kontaktformular wirkt auf den ersten Blick simpel. Name, E-Mail, Nachricht, Absenden. Fertig.
In der Praxis sind Kontaktformulare aber eine der häufigsten Barrieren auf Websites. Und das ist ziemlich ärgerlich, weil genau hier oft der wichtigste Moment passiert: Ein Besucher möchte Kontakt aufnehmen, eine Anfrage stellen, ein Angebot anfordern oder einen Termin vereinbaren.
Wenn das Formular nicht funktioniert, ist die Chance weg. Nicht nur für Menschen mit Behinderung, sondern auch für alle, die gerade am Smartphone sitzen, wenig Zeit haben oder sich bei einer Fehlermeldung fragen: „Was will diese Website eigentlich von mir?“
Ein barrierefreies Kontaktformular ist deshalb kein Extra. Es ist ein sehr praktischer Teil einer guten Website.
Warum Kontaktformulare so wichtig sind
Viele Webseitenbetreiber kümmern sich zuerst um Startseite, Design, Bilder und Texte. Das ist verständlich. Aber aus Nutzersicht ist oft das Formular entscheidend.
Denn dort wird aus Interesse eine Anfrage.
Ein Kontaktformular muss deshalb mehr können, als nur hübsch aussehen. Es muss verständlich, bedienbar und zuverlässig sein.
Besucher sollten sofort erkennen:
Welche Felder muss ich ausfüllen?
Welche Angaben sind freiwillig?
Was passiert nach dem Absenden?
Wie erkenne ich Fehler?
Bekomme ich eine Bestätigung?
Kann ich das Formular auch ohne Maus nutzen?
Wenn diese Fragen nicht klar beantwortet werden, entstehen unnötige Hürden.
1. Jedes Feld braucht eine klare Beschriftung
Der wichtigste Punkt zuerst: Jedes Formularfeld sollte eine sichtbare und verständliche Beschriftung haben.
Also nicht nur ein leeres Feld mit Platzhaltertext wie „Name“ oder „E-Mail“, sondern eine echte Beschriftung über oder neben dem Feld.
Warum?
Platzhalter verschwinden oft, sobald man etwas eingibt. Dann weiß der Nutzer nicht mehr sicher, was dort eigentlich gefragt war. Für manche Hilfsmittel sind Platzhalter außerdem keine saubere Alternative zu echten Labels.
Besser ist:
Name
E-Mail-Adresse
Telefonnummer
Nachricht
Schlecht ist ein Formular, bei dem nur grauer Text im Feld steht und sonst nichts. Das sieht minimalistisch aus, ist aber oft schlechter nutzbar.
2. Pflichtfelder verständlich kennzeichnen
Viele Formulare markieren Pflichtfelder mit einem Sternchen. Das ist okay, wenn erklärt wird, was das Sternchen bedeutet.
Noch besser ist eine klare Kennzeichnung wie:
Name, Pflichtfeld
E-Mail-Adresse, Pflichtfeld
Telefonnummer, optional
Wichtig ist: Nutzer sollten nicht erst nach dem Absenden merken, welche Felder fehlen.
Wenn ein Feld verpflichtend ist, sollte das vorher erkennbar sein. Das spart Frust und reduziert Fehler.
3. Nur abfragen, was wirklich nötig ist
Ein gutes Kontaktformular ist nicht länger als nötig.
Viele Websites fragen zu viel ab:
Firma, Position, Adresse, Telefonnummer, Budget, Branche, Website, Betreff, Kundennummer, Rückrufzeit und noch drei Dropdowns.
Manchmal ist das sinnvoll. Oft aber nicht.
Je mehr Felder ein Formular hat, desto höher ist die Wahrscheinlichkeit, dass jemand abbricht. Für Barrierefreiheit ist das ebenfalls wichtig, weil jedes zusätzliche Feld eine neue mögliche Hürde ist.
Frag dich bei jedem Feld:
Brauche ich diese Information wirklich für die erste Kontaktaufnahme?
Oder kann ich sie später klären?
Ein kurzes, klares Formular ist meistens besser als ein langes Formular, das alles auf einmal wissen will.
4. Feldtypen sinnvoll wählen
Ein Formular wird leichter nutzbar, wenn die Feldtypen passen.
Für eine E-Mail-Adresse sollte ein E-Mail-Feld verwendet werden. Für Telefonnummern ein Telefonfeld. Für längere Nachrichten ein mehrzeiliges Textfeld. Für einfache Ja/Nein-Fragen eine Checkbox oder Auswahl.
Das hilft auch auf dem Smartphone. Bei einem E-Mail-Feld erscheint oft eine passende Tastatur. Bei Telefonnummern erscheint eher eine Zifferntastatur.
Kleine technische Details können die Nutzung deutlich angenehmer machen.
5. Hinweise dort platzieren, wo sie gebraucht werden
Manchmal brauchen Felder zusätzliche Hinweise.
Zum Beispiel:
„Bitte geben Sie Ihre Telefonnummer nur an, wenn wir Sie zurückrufen dürfen.“
„Maximal 5 MB, erlaubt sind PDF und JPG.“
„Bitte beschreiben Sie kurz, worum es geht.“
Solche Hinweise sollten direkt beim passenden Feld stehen. Nicht irgendwo unten im Kleingedruckten.
Wichtig ist auch: Hinweise dürfen nicht nur sehr hellgrau oder winzig dargestellt sein. Wenn eine Information wichtig ist, muss sie gut lesbar sein.
6. Platzhalter nicht als einzige Erklärung nutzen
Platzhaltertexte sind verführerisch. Sie lassen das Formular sauber und aufgeräumt aussehen.
Aber sie haben Nachteile.
Sie verschwinden beim Tippen. Sie sind oft kontrastarm. Manche Nutzer verwechseln sie mit bereits ausgefüllten Inhalten. Und bei längeren Formularen weiß man später nicht mehr sicher, was in ein Feld gehört.
Platzhalter können ergänzen. Sie sollten aber nicht die einzige Beschriftung sein.
Besser:
Beschriftung: E-Mail-Adresse
Platzhalter: name@beispiel.de
So ist klar, worum es geht, und der Platzhalter zeigt nur ein Beispiel.
7. Gute Fehlermeldungen schreiben
Fehlermeldungen sind einer der wichtigsten Punkte bei barrierefreien Formularen.
Schlecht sind Meldungen wie:
„Fehler“
„Ungültig“
„Bitte prüfen“
„Das Formular konnte nicht gesendet werden“
Das hilft niemandem.
Besser ist:
„Bitte geben Sie eine gültige E-Mail-Adresse ein.“
„Bitte füllen Sie das Feld Name aus.“
„Bitte schreiben Sie eine Nachricht.“
„Bitte akzeptieren Sie die Datenschutzerklärung.“
Eine gute Fehlermeldung sagt genau, was falsch ist und wie der Nutzer es beheben kann.
8. Fehler direkt beim Feld anzeigen
Fehler sollten nicht nur oben über dem Formular stehen. Sie sollten auch beim betroffenen Feld sichtbar sein.
Wenn oben steht „Bitte korrigieren Sie die markierten Felder“, muss klar sein, welche Felder gemeint sind.
Noch besser ist:
Beim Feld „E-Mail-Adresse“ steht direkt: „Bitte geben Sie eine gültige E-Mail-Adresse ein.“
So muss der Nutzer nicht suchen.
Bei längeren Formularen kann zusätzlich oben eine Fehlerübersicht sinnvoll sein. Dann sollten die einzelnen Fehler zu den passenden Feldern führen.
9. Fehler nicht nur über Farbe anzeigen
Viele Formulare markieren Fehler nur rot. Das reicht nicht.
Nicht jeder erkennt Farben gleich gut. Außerdem ist Rot je nach Kontrast manchmal schwer zu sehen.
Ein Fehler sollte deshalb immer auch als Text erklärt werden.
Also nicht nur ein roter Rahmen um das Feld, sondern zusätzlich eine konkrete Meldung:
„Bitte geben Sie Ihre E-Mail-Adresse ein.“
Farbe darf unterstützen. Sie sollte aber nicht die einzige Information sein.
10. Eingaben bei Fehlern behalten
Ein sehr nerviger Fehler: Man füllt ein Formular aus, klickt auf Absenden, etwas fehlt – und plötzlich sind alle Angaben weg.
Das ist für alle Nutzer schlecht. Für Menschen, die länger zum Ausfüllen brauchen, ist es besonders frustrierend.
Deshalb sollten eingegebene Daten erhalten bleiben, wenn ein Fehler passiert.
Ausnahme können sensible Daten sein. Aber Name, Nachricht oder normale Kontaktdaten sollten nicht einfach verschwinden.
11. Das Formular muss mit Tastatur bedienbar sein
Ein barrierefreies Formular muss ohne Maus funktionieren.
Teste es so:
Maus weglegen.
Mit Tab von Feld zu Feld springen.
Mit Enter oder Leertaste Buttons und Checkboxen bedienen.
Dropdowns öffnen.
Absenden.
Fehler korrigieren.
Achte darauf, ob die Reihenfolge logisch ist. Man sollte nicht plötzlich vom ersten Feld in den Footer springen oder nach dem Absenden irgendwo auf der Seite landen, ohne zu wissen, was passiert ist.
12. Der Fokus muss sichtbar sein
Wenn man mit Tastatur durch ein Formular geht, muss immer sichtbar sein, welches Feld gerade aktiv ist.
Das nennt man Fokus.
Viele Websites entfernen den Fokusrahmen, weil er angeblich nicht schön aussieht. Das ist keine gute Idee.
Der Fokus kann modern gestaltet sein. Er sollte aber klar erkennbar bleiben.
Zum Beispiel durch einen sichtbaren Rahmen, eine farbige Hervorhebung oder einen deutlichen Schatten.
13. Checkboxen richtig beschriften
Kontaktformulare haben oft Checkboxen:
Datenschutzerklärung akzeptieren
Rückruf gewünscht
Newsletter abonnieren
AGB akzeptieren
Wichtig ist, dass Checkbox und Text technisch zusammengehören. Der Nutzer sollte den Text anklicken können, um die Checkbox zu aktivieren. Auch Screenreader müssen erkennen, wozu die Checkbox gehört.
Problematisch ist eine Checkbox ohne verständliche Beschriftung oder mit einem Text, der nur optisch danebensteht.
Auch hier gilt: Nicht nur hübsch platzieren, sondern sauber verbinden.
14. Datenschutzhinweis verständlich einbauen
Kontaktformulare brauchen oft einen Hinweis zur Datenverarbeitung. Viele Websites lösen das mit langen, schwer lesbaren Texten direkt unter dem Formular.
Das kann abschrecken und überfordern.
Besser ist ein kurzer, verständlicher Hinweis mit Link zur Datenschutzerklärung.
Zum Beispiel sinngemäß:
„Wir verwenden Ihre Angaben zur Bearbeitung Ihrer Anfrage. Weitere Informationen finden Sie in unserer Datenschutzerklärung.“
Wichtig ist: Der Link muss gut erreichbar und verständlich benannt sein. Nicht nur „hier“.
15. Captchas möglichst vermeiden oder zugänglich lösen
Captchas sind ein großes Thema.
Viele Kontaktformulare nutzen Bilderrätsel, Zahlenaufgaben oder „Ich bin kein Roboter“-Prüfungen gegen Spam. Leider sind Captchas oft schlecht zugänglich.
Bilderrätsel können für blinde Nutzer unmöglich sein. Audio-Captchas sind nicht immer verständlich. Kleine Rechenaufgaben können für manche Nutzer ebenfalls eine Hürde sein.
Besser sind oft unsichtbare Spam-Schutzmethoden, Honeypot-Felder oder serverseitige Prüfungen, die den Nutzer nicht unnötig belasten.
Wenn ein Captcha nötig ist, sollte es möglichst barrierearm sein und eine Alternative anbieten.
16. Erfolgsmeldung klar anzeigen
Nach dem Absenden muss klar sein, ob die Nachricht angekommen ist.
Eine gute Erfolgsmeldung könnte lauten:
„Vielen Dank. Ihre Nachricht wurde erfolgreich gesendet. Wir melden uns so schnell wie möglich.“
Nicht gut ist, wenn nach dem Klick einfach nichts passiert oder die Seite nur kurz springt.
Die Erfolgsmeldung sollte gut sichtbar sein. Idealerweise wird der Fokus nach dem Absenden so gesetzt, dass auch Tastatur- und Screenreader-Nutzer die Rückmeldung mitbekommen.
17. Der Absenden-Button muss eindeutig sein
Ein Button mit „Senden“ ist meistens okay. Noch besser ist ein konkreter Buttontext.
Zum Beispiel:
„Anfrage senden“
„Nachricht abschicken“
„Rückruf anfragen“
„Terminwunsch senden“
„Angebot anfordern“
Der Button sollte klar sagen, was passiert. Besonders bei Formularen mit rechtlicher oder geschäftlicher Bedeutung ist das wichtig.
Außerdem sollte der Button nicht nur durch Farbe erkennbar sein und genug Kontrast haben.
18. Keine zu engen Zeitlimits
Manche Formulare laufen nach einer gewissen Zeit ab. Das kann bei Logins, Buchungen oder längeren Anfragen passieren.
Bei einfachen Kontaktformularen sollte es möglichst kein enges Zeitlimit geben.
Menschen brauchen unterschiedlich lange. Manche müssen Informationen nachschlagen. Andere nutzen Hilfsmittel oder schreiben langsamer.
Wenn ein Zeitlimit nötig ist, sollte es vorher klar sein und möglichst verlängert werden können.
19. Mobile Ansicht gründlich testen
Viele Kontaktanfragen kommen über das Smartphone. Deshalb muss das Formular mobil sauber funktionieren.
Prüfe:
Sind Felder groß genug?
Kann man gut tippen?
Überlappt nichts?
Sind Fehlermeldungen sichtbar?
Ist der Absenden-Button erreichbar?
Sind Checkboxen gut antippbar?
Funktioniert das Formular auch mit Cookie-Banner oder Chat-Widget?
Ein Formular, das am Desktop gut aussieht, kann mobil trotzdem mühsam sein.
20. Autovervollständigung sinnvoll nutzen
Bei typischen Kontaktdaten kann Autovervollständigung helfen. Browser können Name, E-Mail, Telefonnummer oder Adresse vorschlagen.
Das spart Zeit und reduziert Fehler.
Dafür sollten Formularfelder sinnvoll aufgebaut sein. Wenn jedes Feld irgendwie benannt ist oder ein Formular-Plugin seltsame Feldtypen erzeugt, funktioniert Autovervollständigung oft schlechter.
Gerade bei längeren Formularen ist das ein echter Komfortgewinn.
21. Datei-Upload barrierearm gestalten
Manche Kontaktformulare erlauben Datei-Uploads. Zum Beispiel für Bewerbungen, Fotos, Dokumente oder Projektunterlagen.
Dann sollte klar sein:
Welche Dateitypen sind erlaubt?
Wie groß darf die Datei sein?
Wurde die Datei erfolgreich hochgeladen?
Was passiert, wenn die Datei zu groß ist?
Kann man eine Datei wieder entfernen?
Eine Meldung wie „Upload failed“ ist nicht hilfreich. Besser ist eine konkrete Erklärung:
„Die Datei ist zu groß. Bitte laden Sie eine Datei mit maximal 5 MB hoch.“
22. Mehrstufige Formulare klar strukturieren
Lange Formulare werden manchmal in mehrere Schritte aufgeteilt. Das kann sinnvoll sein, wenn es gut gemacht ist.
Wichtig ist:
Nutzer sollten wissen, in welchem Schritt sie sind.
Zurück und Weiter müssen gut bedienbar sein.
Eingaben sollten erhalten bleiben.
Fehler sollten im passenden Schritt angezeigt werden.
Der letzte Schritt sollte eine klare Zusammenfassung bieten.
Mehrstufige Formulare können helfen. Sie können aber auch verwirren, wenn der Ablauf nicht klar ist.
23. Dropdowns nicht unnötig kompliziert machen
Dropdowns sind praktisch, aber nicht immer die beste Lösung.
Wenn es nur zwei oder drei Optionen gibt, sind Radio-Buttons oft verständlicher. Bei vielen Optionen kann eine Suche sinnvoll sein, muss aber gut bedienbar bleiben.
Problematisch sind stark gestylte Dropdowns, die mit Tastatur oder Screenreader schlecht funktionieren.
Prüfe also:
Kann man die Auswahl öffnen?
Kann man Optionen wählen?
Ist die gewählte Option erkennbar?
Funktioniert es mobil?
Ist die Beschriftung klar?
24. Formular nicht durch Popups blockieren
Cookie-Banner, Chatfenster oder Newsletter-Popups können Formulare überdecken. Das passiert besonders auf Smartphones.
Prüfe deshalb dein Kontaktformular mit allen aktiven Website-Elementen:
Cookie-Banner sichtbar?
Chat-Widget eingeblendet?
Sticky Header aktiv?
Footer-Leiste vorhanden?
Newsletter-Popup aktiv?
Wenn der Absenden-Button verdeckt wird, ist das Formular praktisch kaputt.
25. Teste mit echten Fehlern
Viele prüfen ein Formular nur im Idealfall: alles richtig ausfüllen, absenden, fertig.
Für Barrierefreiheit musst du auch Fehler testen.
Probiere bewusst:
E-Mail-Adresse ohne @
leeres Pflichtfeld
zu kurze Nachricht
nicht akzeptierte Checkbox
zu große Datei
falsches Dateiformat
keine Auswahl in einem Pflicht-Dropdown
Erst dann siehst du, ob Fehlermeldungen wirklich helfen.
Reicht ein Formular-Plugin?
Viele WordPress-Websites nutzen Formular-Plugins wie Contact Form 7, WPForms, Gravity Forms, Fluent Forms oder Ninja Forms.
Diese Plugins können gute Grundlagen bieten. Aber sie machen dein Formular nicht automatisch barrierefrei.
Entscheidend ist, wie du das Formular baust:
Welche Felder nutzt du?
Wie beschriftest du sie?
Wie sehen Fehlermeldungen aus?
Welche Farben nutzt dein Theme?
Wie wird Spam-Schutz umgesetzt?
Welche Zusatz-Plugins greifen ein?
Ein gutes Plugin kann helfen. Die Verantwortung für ein verständliches Formular bleibt trotzdem bei dir.
Kurze Checkliste für dein Kontaktformular
Prüfe dein Formular einmal mit diesen Fragen:
Hat jedes Feld eine sichtbare Beschriftung?
Sind Pflichtfelder klar erkennbar?
Sind Hinweise verständlich?
Sind Fehlermeldungen konkret?
Bleiben Eingaben bei Fehlern erhalten?
Funktioniert alles mit Tastatur?
Ist der Fokus sichtbar?
Sind Checkboxen sauber beschriftet?
Ist der Datenschutzhinweis verständlich?
Ist der Spam-Schutz barrierearm?
Gibt es eine klare Erfolgsmeldung?
Funktioniert das Formular mobil?
Werden Fehler direkt beim Feld angezeigt?
Sind Buttons eindeutig benannt?
Wenn du diese Punkte sauber hinbekommst, ist dein Kontaktformular schon deutlich besser als viele andere.
Fazit: Ein gutes Kontaktformular macht es Nutzern leicht
Ein barrierefreies Kontaktformular ist kein kompliziertes Spezialprojekt. Es geht vor allem um Klarheit.
Klare Beschriftungen.
Klare Hinweise.
Klare Fehlermeldungen.
Klare Rückmeldung nach dem Absenden.
Gute Bedienbarkeit mit Tastatur und Smartphone.
Genau das hilft nicht nur Menschen mit Behinderung. Es hilft allen Nutzern.
Mein praktischer Rat: Teste dein Kontaktformular nicht nur im perfekten Fall. Teste es mit leerem Pflichtfeld, falscher E-Mail-Adresse, ohne Maus und auf dem Smartphone. Dann siehst du schnell, ob es wirklich verständlich ist.
Ein Kontaktformular ist oft der direkte Draht zwischen Website und Kunde. Wenn dieser Draht unnötig kompliziert ist, verliert man Anfragen. Wenn er klar und gut bedienbar ist, wirkt die ganze Website professioneller.
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.