Barrierefreie Formulare: Kontaktformulare, die alle ausfüllen können

Das Kontaktformular ist oft die wichtigste Stelle deiner Website: Hier wird aus einem Besuch eine Anfrage, eine Anmeldung für den Vereinsanlass oder eine Offertanfrage. Gleichzeitig scheitern genau hier viele Menschen – an fehlenden Beschriftungen, an Fehlermeldungen, die niemand versteht, oder an einem CAPTCHA, das sie nicht lösen können. Die gute Nachricht: Die meisten Hürden lassen sich mit wenig Aufwand beheben. Wir gehen ein typisches Kontaktformular Schritt für Schritt durch.

Wer von einem guten Formular profitiert

Laut der Web Accessibility Initiative (WAI) des W3C profitieren unter anderem:

• Menschen mit Screenreader: Der Screenreader liest vor, wie ein Feld heisst – aber nur, wenn die Beschriftung technisch mit dem Feld verknüpft ist.
• Menschen mit Spracheingabe: Wer per Sprache steuert, nennt den Namen eines Feldes, um hineinzuspringen. Das klappt nur mit sauberen Beschriftungen.
• Menschen mit eingeschränkter Feinmotorik: Für sie ist eine grössere Klickfläche wichtig, zum Beispiel wenn auch der Text neben einer Checkbox anklickbar ist.
• Menschen mit kognitiven Beeinträchtigungen: Ein klarer Aufbau, eine verständliche Anleitung und eindeutige Rückmeldungen machen das Formular für sie leichter verständlich.

Dazu kommen alle, die unterwegs auf dem Handy tippen oder wenig Zeit haben. Der Massstab für all das sind die Web Content Accessibility Guidelines (WCAG) des W3C. Die aktuelle Version 2.2 ist seit dem 5. Oktober 2023 eine offizielle W3C-Empfehlung.

1. Jedes Feld braucht eine sichtbare Beschriftung

Der häufigste Fehler: Das Feld hat keine Beschriftung, nur einen grauen Platzhaltertext im Feld («Name …»). Die WAI ist hier deutlich: Platzhaltertext ersetzt keine Beschriftung. Screenreader behandeln ihn nicht als Beschriftung, er hat meist wenig Kontrast, und er verschwindet, sobald du zu tippen beginnst.

• Setz über jedes Feld eine kurze, eindeutige Beschriftung: «E-Mail» statt «Kontakt».
• Die Beschriftung muss im Code mit dem Feld verknüpft sein (Element label mit passendem for-Attribut). Dann wird sie vorgelesen, und ein Klick auf den Text setzt den Cursor ins Feld.
• Gruppiere zusammengehörige Auswahlfelder, etwa «Wie sollen wir dich kontaktieren?» mit den Optionen Telefon und E-Mail. Im Code geschieht das mit fieldset und legend; die Frage ist dann die Überschrift der Gruppe.

2. Pflichtfelder klar kennzeichnen – und so wenige wie möglich

Frag nur, was du wirklich brauchst. Für eine Rückrufbitte reichen oft Name und Telefonnummer, für die Anmeldung zum Vereinsanlass Name und E-Mail. Jedes zusätzliche Pflichtfeld ist eine weitere Hürde.

Wichtig ist, wie du Pflichtfelder markierst. Nur Farbe reicht nicht: Ein rot eingefärbtes Feld ist für Menschen mit Farbsehschwäche oder mit Screenreader nicht als Pflichtfeld erkennbar. Die WCAG nennen das ausdrücklich als Fehler. Besser:

• ein Sternchen in der Beschriftung, verbunden mit dem Hinweis «Felder mit * sind Pflicht» am Anfang des Formulars,
• oder gleich der Text «(Pflicht)» in der Beschriftung,
• zusätzlich im Code als Pflichtfeld markiert, damit Hilfsmittel es ansagen.

Erwartest du ein bestimmtes Format, sag es vorher, etwa «Telefon, z. B. 071 123 45 67». Noch freundlicher ist es, verschiedene Schreibweisen zu akzeptieren – mit oder ohne Leerzeichen, mit oder ohne +41 – und sie im Hintergrund zu vereinheitlichen.

3. Autocomplete: Lass den Browser mithelfen

Seit WCAG 2.1 gibt es das Kriterium 1.3.5 (Identify Input Purpose, Stufe AA). Felder, die Angaben über die Person selbst abfragen, sollen ihren Zweck maschinenlesbar mitteilen. Das geht mit dem HTML-Attribut autocomplete: Der Browser schlägt dann Name, E-Mail oder Adresse vor. Das spart allen Tipparbeit und hilft besonders Menschen, denen das Tippen oder Erinnern schwerfällt.

Typische Werte für ein Kontaktformular sind name, given-name und family-name für den Namen, email, tel, organization für die Firma oder den Verein sowie street-address, postal-code und address-level2 für Strasse, PLZ und Ort.

Ebenso wichtig ist der passende Feldtyp. Ein Feld vom Typ email zeigt auf dem Handy eine Tastatur mit @-Zeichen, ein Feld vom Typ tel einen Ziffernblock.

4. Fehlermeldungen, die weiterhelfen

Zwei WCAG-Kriterien sind hier zentral: Ein Fehler muss erkannt und in Textform beschrieben werden (3.3.1), und wenn klar ist, wie man ihn behebt, soll die Meldung das auch sagen (3.3.3).

• Konkret statt allgemein: Nicht «Ungültige Eingabe», sondern «Bitte gib deine E-Mail-Adresse vollständig an, z. B. name@beispiel.ch».
• Direkt beim Feld: Die Meldung steht beim betroffenen Feld und ist im Code mit ihm verknüpft. Ein roter Rahmen allein genügt nicht.
• Überblick bei mehreren Fehlern: Eine Zusammenfassung oben im Formular, deren Einträge direkt zum jeweiligen Feld springen.
• Fokus setzen: Nach dem Absenden springt der Fokus zur Zusammenfassung oder zum ersten fehlerhaften Feld, damit niemand suchen muss.
• Eingaben behalten: Nichts ist frustrierender als ein Formular, das nach einem Fehler leer ist.

5. Logische Reihenfolge und sichtbarer Fokus

Wer mit der Tab-Taste durch ein Formular geht, braucht eine logische Reihenfolge (WCAG 2.4.3): erst Name, dann E-Mail, dann Nachricht – und nicht vom Namen zur Newsletter-Checkbox und wieder zurück. Am einfachsten stehen die Felder im Code in derselben Reihenfolge wie auf dem Bildschirm.

• Der Fokus muss immer sichtbar sein (2.4.7): ein deutlicher Rahmen um das aktive Feld oder den Button.
• Seit WCAG 2.2 darf das fokussierte Element nicht vollständig verdeckt sein (2.4.11), etwa durch einen fixierten Header oder ein Cookie-Banner.
• Buttons und andere Klickziele sollen mindestens 24 × 24 CSS-Pixel gross sein oder genügend Abstand haben (2.5.8).

6. CAPTCHA: Spamschutz ohne Rätsel

Verzerrte Buchstaben, «Klicke alle Ampeln an»: Solche Tests schliessen laut W3C viele Menschen mit Behinderungen aus – blinde und sehbehinderte Menschen ebenso wie Menschen mit Legasthenie oder anderen kognitiven Beeinträchtigungen. Das W3C hält zudem fest, dass viele verbreitete CAPTCHA-Verfahren gar nicht mehr besonders wirksam oder sicher sind.

Für ein Kontaktformular gibt es Alternativen, bei denen niemand etwas lösen muss:

• ein für Menschen unsichtbares Zusatzfeld («Honeypot»), das nur Bots ausfüllen,
• Prüfungen im Hintergrund, zum Beispiel ob das Formular unrealistisch schnell abgeschickt wurde,
• ein Spamfilter auf dem Server, der eingehende Nachrichten prüft.

Lässt sich ein CAPTCHA nicht vermeiden, verlangen die WCAG mindestens einen Text, der den Zweck erklärt, und eine Variante in einer anderen Sinnesform, zum Beispiel Audio statt Bild. Biete ausserdem immer einen zweiten Weg an: Telefonnummer und E-Mail-Adresse gleich neben dem Formular.

Bei Logins, etwa für einen Mitgliederbereich, geht WCAG 2.2 weiter: Nach Kriterium 3.3.8 darf die Anmeldung keine Merk-, Abschreib- oder Rätselaufgabe voraussetzen, ausser es gibt eine Alternative oder eine Hilfe dazu. Passwortmanager und das Einfügen aus der Zwischenablage dürfen also nicht blockiert werden.

7. Die Erfolgsmeldung nicht vergessen

Nach dem Absenden muss klar sein, dass alles geklappt hat. Erscheint die Bestätigung, ohne dass die Seite neu lädt, muss ein Screenreader sie trotzdem ansagen (WCAG 4.1.3, Statusmeldungen). Technisch geschieht das zum Beispiel mit role="status".

Sag in der Meldung auch, wie es weitergeht. Zum Beispiel: «Danke! Deine Nachricht ist angekommen. Wir melden uns innert zwei Arbeitstagen.» Und achte darauf, dass auch diese Meldungen in der Sprache deiner Website erscheinen und nicht als englischer Standardtext deines Formular-Plugins.

Und rechtlich?

Kurz eingeordnet, ohne Anspruch auf Rechtsberatung (Stand Oktober 2026):

• Der E-Government-Standard eCH-0059 (Version 3.0, verabschiedet am 25. Juni 2020) verlangt für Websites im E-Government-Umfeld die WCAG 2.1 auf Stufe AA.
• Nach Art. 6 des Behindertengleichstellungsgesetzes (BehiG) dürfen Private, die Dienstleistungen öffentlich anbieten, Menschen mit Behinderungen nicht diskriminieren.
• Am 20. Dezember 2024 hat der Bundesrat dem Parlament eine Teilrevision des BehiG vorgelegt. Die Vorlage sieht vor, dass private Anbieter von Dienstleistungen für die Öffentlichkeit angemessene Vorkehrungen treffen müssen – ausdrücklich auch bei digitalen Dienstleistungen. In Kraft ist sie noch nicht. Den aktuellen Stand findest du beim Eidgenössischen Büro für die Gleichstellung von Menschen mit Behinderungen (EBGB).
• Verkaufst du in die EU, etwa über einen Online-Shop, betrifft dich unter Umständen der European Accessibility Act, dessen Anforderungen seit dem 28. Juni 2025 gelten. Kleinstunternehmen, die Dienstleistungen erbringen (weniger als 10 Beschäftigte und höchstens 2 Mio. Euro Jahresumsatz oder Jahresbilanzsumme), sind von dessen Pflichten ausgenommen.

Unabhängig davon gilt: Jede Person, die an deinem Formular scheitert, ist eine verlorene Anfrage.

Checkliste: Dein Formular in zehn Minuten testen

• Mit der Tab-Taste durch alle Felder: Ist die Reihenfolge logisch, der Fokus immer sichtbar und nie verdeckt?
• Formular komplett ohne Maus ausfüllen und absenden.
• Formular leer absenden: Erscheinen verständliche Meldungen beim richtigen Feld? Bleiben bereits gemachte Eingaben erhalten?
• Auf den Text neben einer Checkbox klicken: Wird sie aktiviert?
• Auf dem Handy: Schlägt der Browser Name und E-Mail vor? Erscheint beim E-Mail-Feld eine Tastatur mit @?
• Seite auf 200 % zoomen: Ist alles lesbar und bedienbar?
• Gibt es ein CAPTCHA? Wenn ja: Gibt es einen anderen Weg zu dir?
• Nach dem Absenden: Ist die Erfolgsmeldung klar, in deiner Sprache und sagt sie, wie es weitergeht?

Wir schauen uns dein Formular an

Du bist nicht sicher, wie dein Kontaktformular abschneidet? Im kostenlosen Barrierefreiheits-Check prüfen wir unter anderem, ob deine Formularfelder beschriftet und deine Fehlermeldungen verständlich sind. Wie wir Websites für alle nutzbar machen, erfährst du auf unserer Seite zur Barrierefreiheit.