Zum Inhalt springen

Ratgeber

Barrierefreie Formulare: die kritischste Stelle jeder Website

Am Formular entscheidet sich, ob aus einem Besuch eine Anfrage wird. Genau hier häufen sich die Barrieren: fehlende Labels, kryptische Fehlermeldungen, Tastaturfallen und unverständliche Sprache. Diese Seite zeigt, wie Formulare barrierefrei werden, und behandelt sachlich, was Gendern und Sprache mit Screenreadern zu tun haben.

Kostenlos testen → Zum Full Audit
Sichtbare Labels
Klare Fehlermeldungen
Volle Tastaturbedienung
Verständliche Sprache
Ausgangslage

Warum ausgerechnet Formulare?

Ein unlesbarer Teaser kostet Aufmerksamkeit. Ein unbedienbares Formular kostet die Anfrage. Formulare sind die Stelle, an der Barrierefreiheit unmittelbar auf den Geschäftserfolg durchschlägt: Wer das Kontaktformular mit dem Screenreader nicht ausfüllen kann oder per Tastatur in einem Dropdown stecken bleibt, bricht ab und kommt selten wieder.

Dazu kommt die rechtliche Seite: Gerade Bestell-, Buchungs- und Kontaktfunktionen sind der Kern dessen, was das Barrierefreiheitsstärkungsgesetz bei B2C-Angeboten verlangt, siehe BFSG-Guide. Die vier Handlungsfelder auf dieser Seite: Labels, Fehlermeldungen, Tastatur und Sprache.

Labels

Jedes Feld braucht ein sichtbares Label

Das Label ist die Beschriftung, die sagt, was in ein Feld gehört. Damit sie für Screenreader funktioniert, muss sie programmatisch mit dem Feld verknüpft sein, per for-Attribut auf die ID des Feldes:

<!-- Richtig: sichtbares, verknüpftes Label --> <label for="email">E-Mail-Adresse</label> <input type="email" id="email" name="email" autocomplete="email"> <!-- Falsch: Platzhalter ersetzt kein Label --> <input type="email" placeholder="E-Mail-Adresse">
Der Klassiker: Platzhaltertext statt Label. Der Platzhalter verschwindet beim Tippen, dann fehlt die Beschriftung genau dann, wenn man sie braucht. Screenreader behandeln Platzhalter zudem uneinheitlich. JERVIS meldet fehlende und widersprüchliche Labels unter der Finding-ID a11y-missing-labels.
✓ Pflichtfelder kennzeichnen: mit Text oder Symbol plus Erklärung, nicht allein mit roter Farbe.
✓ Autocomplete nutzen: Attribute wie autocomplete="email" lassen Browser bekannte Angaben ausfüllen, das reduziert Tipparbeit für alle, besonders bei motorischen Einschränkungen.
✓ Zusammenhängende Gruppen beschriften: Radio-Buttons und Checkbox-Gruppen bekommen eine gemeinsame Gruppen-Beschriftung, damit klar ist, worauf sich die Optionen beziehen.
Fehlermeldungen

Fehlermeldungen, die weiterhelfen statt rätseln lassen

Eine Fehlermeldung ist gut, wenn jeder Nutzer ohne Raten versteht: Welches Feld ist betroffen, was ist falsch, wie sieht es richtig aus. Daraus folgen drei Regeln:

Konkret benennen

"Bitte geben Sie Ihre E-Mail-Adresse im Format [email protected] an" statt "Eingabe ungültig". Die Meldung nennt Feld und Lösung.

Am Feld anzeigen

Die Meldung steht direkt beim betroffenen Feld und ist mit ihm programmatisch verknüpft, damit der Screenreader sie beim Fokussieren vorliest. Eine reine Sammelmeldung am Seitenanfang reicht nicht.

Nicht nur Farbe

Ein roter Rahmen allein ist für Menschen mit eingeschränktem Farbsehen unsichtbar. Text oder Symbol müssen die Information zusätzlich tragen.

Eingaben erhalten

Nach einem Fehler bleiben korrekte Eingaben erhalten. Wer nach jedem Fehlversuch alles neu tippen muss, gibt auf, mit Einschränkung erst recht.

Tastatur

Komplett per Tastatur: vom ersten Feld bis zum Absenden

Wer keine Maus nutzen kann, bedient Formulare per Tab, Enter und Pfeiltasten. Dafür muss das Formular drei Bedingungen erfüllen:

1 Logische Reihenfolge: Der Tab-Fokus wandert in der Reihenfolge durch die Felder, in der sie inhaltlich zusammengehören. Positive tabindex-Werte, die die natürliche Reihenfolge überschreiben, meldet JERVIS als Warnung.
2 Sichtbarer Fokus: Es muss jederzeit erkennbar sein, welches Feld gerade aktiv ist. Ein per CSS entfernter Fokusring ohne Ersatz macht das Formular für Tastaturnutzer blind.
3 Keine Tastaturfallen: Aus jedem Element, auch aus Datumswählern und benutzerdefinierten Dropdowns, muss man per Tastatur wieder herauskommen. Eigenbau-Widgets sind hier die häufigste Fehlerquelle.
Mobile dazugedacht: Interaktive Elemente brauchen ausreichend große Trefferflächen. JERVIS misst jedes interaktive Element und meldet Flächen unter 24x24 CSS-Pixel als Verstoss gegen WCAG 2.5.8, empfohlen werden 44x44 Pixel für Touch-Bedienung. Mehr dazu in der Mobile-Optimierung.
Sprache

Verständliche Sprache: das übersehene Barrierefreiheits-Thema

Verständlichkeit ist eines der vier WCAG-Prinzipien und betrifft weit mehr als Formulare: Wer erst dreimal lesen muss, was ein Feld verlangt, scheitert genauso wie an einem fehlenden Label. Die Grundregeln:

✓ Kurze Sätze, aktive Formulierungen, ein Gedanke pro Satz.
✓ Fachbegriffe und Abkürzungen erklären oder vermeiden, interne Kürzel haben in Formularen nichts verloren.
✓ Klar sagen, was passiert: was nach dem Absenden folgt, wie lange eine Antwort dauert, welche Angaben wofür gebraucht werden.
✓ Die Sprache der Seite im Code angeben (lang-Attribut), damit Screenreader richtig aussprechen. Wegen der gesetzlichen Pflicht zur korrekten Sprachangabe stuft JERVIS ein fehlendes lang-Attribut auf mindestens warning hoch.
Gendern

Gendern und Screenreader: worum es technisch geht

Beim Thema Gendern und Barrierefreiheit geht es an dieser Stelle nicht um eine politische Position, sondern um eine technische Frage: Wie gehen Screenreader mit Sonderzeichen im Wortinneren um, etwa Stern, Doppelpunkt oder Unterstrich?

Die Antwort: uneinheitlich. Je nach Software, Version und Einstellung wird das Zeichen vorgelesen ("Mitarbeiter Stern innen"), als Pause interpretiert oder ganz übersprungen. Ein verlässliches, überall gleiches Vorleseverhalten gibt es derzeit nicht. Daraus folgen drei sachliche Empfehlungen:

1 Konsequent bleiben: Wer gendert, wählt eine Form und nutzt sie einheitlich auf der ganzen Website. Wechselnde Schreibweisen verwirren beim Hören stärker als beim Lesen.
2 Neutrale Formulierungen bevorzugen, wo sie passen: Wörter wie Team, Fachleute oder Teilnehmende transportieren dieselbe Absicht ohne Sonderzeichen und lesen sich in jedem Screenreader gleich.
3 Gegenprüfen: Die eigene Formulierung einmal mit einem Screenreader anhören, dann ist die Entscheidung keine Vermutung mehr, sondern getestet.
Prüfung

Wie JERVIS Formulare prüft

  • 1

    Barrierefreiheits-Modul

    Prüft Labels, ARIA-Attribute, Tab-Reihenfolge, sichtbaren Fokus und Touch-Target-Größen nach WCAG 2.2 AA, auf Desktop und Mobile.

    Zur Modul-Seite →

  • 2

    Funktionstest-Modul

    Bedient Formulare im echten Browser: Sind sie korrekt strukturiert, reagieren Buttons, treten JavaScript-Fehler bei der Interaktion auf?

    Zum Funktionstest-Guide →

  • 3

    Text-Analyse

    Prüft Rechtschreibung, Verständlichkeit und Tonalität der Inhalte, deutsch-nativ.

    Zum Guide Textqualität →

Einstieg: Der kostenlose Website-Check prüft Barrierefreiheit auf bis zu 6 Seiten. Alle Seiten samt Formular-Interaktion prüft der JERVIS Audit, die Kosten stehen in der Preisübersicht.
FAQ

Häufige Fragen zu barrierefreien Formularen

Was macht ein Formular barrierefrei?
Vier Dinge: Jedes Feld hat ein sichtbares, programmatisch verknüpftes Label. Fehlermeldungen sind konkret, stehen am betroffenen Feld und verlassen sich nicht allein auf Farbe. Das komplette Formular ist per Tastatur bedienbar, mit sichtbarem Fokus und logischer Reihenfolge. Und die Sprache ist so verständlich, dass klar ist, was in jedes Feld gehört.
Reicht ein Platzhaltertext statt eines Labels?
Nein. Platzhaltertext verschwindet beim Tippen, dann fehlt die Beschriftung genau in dem Moment, in dem man sie braucht. Screenreader behandeln Platzhalter zudem uneinheitlich. Jedes Eingabefeld braucht ein sichtbares Label, das über das for-Attribut mit dem Feld verknüpft ist. Genau das prüft JERVIS unter der Finding-ID a11y-missing-labels.
Wie sehen barrierefreie Fehlermeldungen aus?
Konkret statt pauschal: Die Meldung benennt das betroffene Feld und sagt, wie die Eingabe richtig aussieht. Sie steht direkt am Feld, nicht nur als Sammelmeldung am Seitenanfang, und sie verlässt sich nie allein auf einen roten Rahmen, weil der für Menschen mit eingeschränktem Farbsehen unsichtbar bleiben kann.
Wie hängen Gendern und Barrierefreiheit zusammen?
Es geht dabei um Vorlesbarkeit, nicht um eine politische Position. Screenreader behandeln Sonderzeichen wie Stern, Doppelpunkt oder Unterstrich unterschiedlich, je nach Software und Einstellung: Manche lesen das Zeichen vor, manche pausieren, manche überspringen es. Wer gendert, sollte eine Form konsequent verwenden und mit einem Screenreader gegenprüfen. Neutrale Formulierungen wie Team oder Teilnehmende umgehen die Frage ganz.
Was ist verständliche Sprache auf Websites?
Kurze Sätze, aktive Formulierungen, erklärte Fachbegriffe und eine klare Struktur. Verständlichkeit gehört zu den vier WCAG-Prinzipien und hilft nicht nur Menschen mit kognitiven Einschränkungen, sondern jedem Besucher, der schnell wissen will, was zu tun ist. In Formularen heißt das: klare Feldnamen, erklärte Pflichtangaben, keine internen Abkürzungen.
Wie prüft JERVIS Formulare?
Das Barrierefreiheits-Modul prüft unter anderem fehlende und widersprüchliche Labels, Tastaturfallen über die Tab-Reihenfolge, sichtbaren Fokus und die Touch-Target-Größe interaktiver Elemente. Das Funktionstest-Modul geht weiter und bedient Formulare im echten Browser, um strukturelle Fehler und JavaScript-Probleme bei der Interaktion zu finden.

Verwandte Themen: Das große Ganze zeigt der Guide Barrierefreie Website, die gesetzliche Pflicht der BFSG 2025 Guide. Wie JERVIS Formulare im echten Browser bedient, erklärt der Funktionstest-Guide, die sprachliche Seite der Guide zur Textqualität. Stand: Juli 2026.

Kommt Ihre Anfrage überall an?

Der kostenlose Website-Check prüft Labels, Fokus und weitere Formular-Kriterien automatisiert, mit konkreten Empfehlungen.

Kostenlosen Check starten → Zum JERVIS Audit
Dauerhaft barrierefrei bleiben: Autopilot PROTECT →
Kosten vorab klären: Preise und Leistungsumfang →