Beitragsbild: KI-generiertAlt-Texte richtig schreiben: ein Text, drei Wirkungen
Was in den Alt-Text gehört, wann er leer bleibt und warum dasselbe Bild an zwei Stellen zwei Texte braucht. Mit …
Webdesign & WordPress · 7 Minuten Lesezeit
Barrierefreie Formulare: der Punkt, an dem die meisten Websites scheitern
Das Kontaktformular ist der einzige Ort, an dem eine Website etwas verlangt statt etwas zu zeigen. Dieser Beitrag arbeitet es als Musterfall durch, von der Beschriftung über die Fehlermeldung bis zur Fokusreihenfolge.
Paul BöstroInhaber der creativecouch, vom BAFA zugelassener Berater
Beitragsbild: KI-generiertDas Wichtigste in 30 Sekunden
- Jedes Feld braucht eine sichtbare Beschriftung, die technisch mit ihm verbunden ist, ein Platzhaltertext reicht nicht.
- Eine Fehlermeldung benennt das Feld in Textform, steht direkt daran und schlägt eine Korrektur vor.
- Der Tastaturfokus muss sichtbar sein und darf nicht verdeckt werden, nach dem Absenden gehört er auf die Bestätigung.
In Audits ist der Befund immer derselbe. Die Seite selbst ist ordentlich, die Kontrastwerte stimmen, die Überschriften sind sauber und dann kommt das Formular.
Dort häufen sich die Fehler, weil ein Formular mehr können muss als Text. Es muss beschriften, bestätigen, korrigieren und zurückmelden und jeder dieser Schritte hat eigene Anforderungen.
Der Reiz daran: Es ist gleichzeitig die Stelle, an der Anfragen entstehen. Barrierefreiheit und Anfragequote zeigen hier ausnahmsweise in dieselbe Richtung.
Bild: KI-generiertDas Label ist keine Beschriftung daneben
Erfolgskriterium 3.3.2 der WCAG 2.2 ist ein Kriterium der Stufe A und sehr knapp formuliert: Beschriftungen oder Anweisungen werden bereitgestellt, wenn Inhalt Nutzereingaben erfordert1.
Der häufigste Verstoß ist der Platzhaltertext im Feld. Er sieht aus wie eine Beschriftung, verschwindet aber beim Tippen. Wer unterbrochen wird, weiß danach nicht mehr, was in das Feld gehört.
Dazu kommt Erfolgskriterium 1.3.1, ebenfalls Stufe A: Struktur und Beziehungen müssen programmatisch ermittelbar sein. Ein label-Element muss also technisch mit seinem Feld verbunden sein und nicht nur daneben stehen.
Fehlermeldungen: benennen, beschreiben, vorschlagen
Hier gibt es zwei Kriterien und sie bauen aufeinander auf.
Erfolgskriterium 3.3.1 auf Stufe A verlangt: Wenn ein Eingabefehler erkannt wird, muss das fehlerhafte Element benannt und der Fehler dem Nutzer in Textform beschrieben werden1. Ein rot umrandetes Feld ohne Text erfüllt das nicht.
Erfolgskriterium 3.3.3 auf Stufe AA geht weiter: Wenn Korrekturvorschläge bekannt sind, müssen sie dem Nutzer angeboten werden. "Ungültige Eingabe" ist kein Vorschlag. "Bitte gib das Datum als TT.MM.JJJJ an" schon.
Der Fehlertext gehört außerdem an das Feld und nicht an den Seitenkopf. Eine Sammelmeldung ganz oben zwingt jeden, der vergrößert oder scrollt, zum Suchen.
Kernsatz
Jedes gestrichene Pflichtfeld ist gleichzeitig ein Barriere- und ein Conversion-Gewinn.
Bild: KI-generiertPflichtfelder richtig kennzeichnen
Das Sternchen allein reicht nicht. Es ist ein visuelles Zeichen, dessen Bedeutung irgendwo erklärt sein muss. In der Ausgabe eines Screenreaders ist es oft nur ein Symbol.
Sauberer ist die Kombination: das Wort "Pflichtfeld" im Label und zusätzlich die technische Kennzeichnung im Markup. Dann stimmt die Information für alle Ausgabewege.
Dasselbe gilt für Hinweise zum Format. Wenn ein Feld eine bestimmte Schreibweise erwartet, gehört dieser Hinweis vor das Feld und nicht in die Fehlermeldung danach. Wer erst nach dem Absenden erfährt, wie die Telefonnummer aussehen soll, hat schon einmal umsonst getippt.
Und die ehrliche Frage vorweg: Braucht das Formular dieses Pflichtfeld wirklich? Jedes gestrichene Pflichtfeld ist gleichzeitig ein Barriere- und ein Conversion-Gewinn.
Die Tastaturprobe dauert zwei Minuten
Ruf dein Formular auf und leg die Maus weg. Mit der Tabulatortaste durchlaufen, mit der Leertaste oder Enter auslösen, sonst nichts.
Drei Dinge fallen dabei fast immer auf. Der Fokus ist nicht zu sehen, obwohl Erfolgskriterium 2.4.7 auf Stufe AA einen sichtbaren Fokusindikator verlangt. Die Reihenfolge springt, weil das Layout per CSS umsortiert wurde. Und ein eingeblendeter Cookie-Hinweis oder eine klebende Kopfzeile verdeckt das gerade fokussierte Feld.
Der letzte Punkt ist in WCAG 2.2 neu geregelt. Erfolgskriterium 2.4.11 auf Stufe AA verlangt, dass ein Element mit Tastaturfokus nicht vollständig durch autorenerzeugte Inhalte verdeckt wird2.
Was WCAG 2.2 sonst noch ergänzt hat
Zwei weitere neue Kriterien betreffen Formulare direkt und werden bisher kaum beachtet.
Erfolgskriterium 3.3.7 auf Stufe A heißt Redundante Eingabe. Informationen, die im selben Vorgang schon einmal eingegeben wurden und erneut verlangt werden, müssen automatisch vorbelegt oder zur Auswahl angeboten werden1. Das trifft mehrstufige Formulare, in denen die Adresse zweimal abgefragt wird.
Erfolgskriterium 3.3.8 auf Stufe AA heißt Barrierefreie Authentifizierung. Ein kognitiver Test, etwa das Erinnern eines Passworts oder das Lösen eines Rätsels, darf in keinem Schritt einer Anmeldung zwingend erforderlich sein. Für Kundenbereiche und Bestellprozesse ist das die größte Änderung.
Dazu kommt ein älteres Kriterium, das gern übersehen wird. Erfolgskriterium 1.3.5 auf Stufe AA verlangt, dass der Zweck eines Eingabefeldes programmatisch ermittelbar ist, sofern er in der Liste der Eingabezwecke steht. Praktisch heißt das: korrekte autocomplete-Angaben bei Name, E-Mail, Telefon und Adresse.
Warum das direkt auf Anfragen wirkt
Jede der genannten Anforderungen entfernt eine Hürde, die alle betrifft und nicht nur Menschen mit Behinderung.
Ein sichtbarer Fokus hilft jedem, der am Laptop ohne Maus arbeitet. Korrekte autocomplete-Angaben sparen jedem am Handy das Tippen. Eine Fehlermeldung mit Korrekturvorschlag verhindert den Abbruch nach dem dritten Versuch.
Ich habe noch kein Formular gesehen, das nach der Umstellung schlechter lief. Das ist eine Beobachtung aus Projekten und keine Studie, aber die Richtung ist in jedem einzelnen Fall dieselbe gewesen.
Dein Fall ist anders
Dann schauen wir ihn uns im kostenlosen Erstgespräch an.
Das CAPTCHA ist der schwierigste Punkt
Erfolgskriterium 1.1.1 nennt CAPTCHAs ausdrücklich als Sonderfall. Sie brauchen eine Textalternative, die Zweck und Art benennt. Dazu kommen alternative Formen für unterschiedliche Sinneswahrnehmungen.
Ein Bilderrätsel allein erfüllt das nicht. Ein Bilderrätsel mit Audioalternative kommt näher, hilft aber niemandem, der beides nicht nutzen kann.
Dazu kommt das neue Erfolgskriterium 3.3.8. Es verbietet den kognitiven Test als zwingenden Schritt in einer Authentifizierung. Aufgaben zum Erkennen von Objekten lässt es auf Stufe AA aber ausdrücklich zu3. Für ein reines Kontaktformular greift es nicht direkt, aber die Stoßrichtung ist eindeutig.
Mein Weg in Projekten ist deshalb ein anderer. Serverseitige Spamfilter, ein verstecktes Honeypot-Feld und eine Zeitmessung fangen den allergrößten Teil ab, ohne dass jemand ein Rätsel lösen muss. Ein sichtbares CAPTCHA setze ich erst ein, wenn das nachweislich nicht reicht.
Was nach dem Absenden passiert
Der am häufigsten vergessene Schritt. Ein Formular wird abgeschickt, die Seite lädt neu oder tauscht einen Bereich aus und die Bestätigung erscheint irgendwo im Layout.
Wer mit der Maus arbeitet, sieht sie. Wer mit Tastatur oder Screenreader arbeitet, bekommt sie oft gar nicht mit, weil der Fokus nach dem Absenden am alten Platz bleibt.
Die Lösung ist unspektakulär: Der Fokus gehört nach dem Absenden auf die Bestätigung und die Bestätigung gehört in einen Bereich, der eine Änderung auch ankündigt. Dasselbe gilt für die Sammelmeldung bei Fehlern.
Das Formular-Plugin ist selten die Lösung
Die gängigen WordPress-Formular-Plugins geben heute brauchbares Markup aus. Das Problem entsteht danach, nämlich im Design.
Labels werden aus optischen Gründen ausgeblendet und durch Platzhalter ersetzt. Fokusrahmen werden entfernt, weil sie nicht ins Layout passen. Fehlermeldungen werden auf ein rotes Icon reduziert.
Das sind alles Entscheidungen im Theme oder im eigenen CSS, nicht im Plugin. Wer ein Formular prüfen lässt, sollte deshalb immer die fertige Seite prüfen lassen und nicht die Plugin-Einstellungen.
Bild: KI-generiertDeine Prüfliste für heute
Sieben Punkte, alle ohne Werkzeug prüfbar, alle in einer halben Stunde erledigt.
- Hat jedes Feld eine sichtbare Beschriftung, die beim Tippen stehen bleibt?
- Ist jede Beschriftung technisch mit ihrem Feld verbunden?
- Steht bei jedem Fehler ein Text am Feld, der sagt, was zu tun ist?
- Sind Pflichtfelder im Text benannt und nicht nur mit einem Sternchen?
- Ist der Tastaturfokus jederzeit sichtbar und nie verdeckt?
- Stimmt die Reihenfolge beim Durchtabben mit der sichtbaren Reihenfolge überein?
- Sind autocomplete-Angaben für Name, E-Mail, Telefon und Adresse gesetzt?
Wenn du bei einem Punkt zögerst, ist die Antwort nein. Das ist keine Schikane, sondern Erfahrung aus vielen Prüfungen.
Welche rechtliche Lage dahintersteht und was von den Abmahnwellen übrig geblieben ist, steht unter BFSG 2026 und Abmahnwellen. Die Grundlagen für WordPress findest du unter barrierefreie WordPress-Website, den Zusammenhang mit Sichtbarkeit unter Barrierefreiheit und SEO.
Wenn du wissen willst, wo dein Kontaktformular hakt, gehen wir es im kostenlosen Erstgespräch von dreißig Minuten gemeinsam durch. Wie die creativecouch Webdesign und Barrierefreiheit zusammendenkt, steht auf der Leistungsseite, die Umsetzung besprechen wir in der Beratung.
Hinweis zur Erstellung: Dieser Beitrag entstand mit Unterstützung von KI und wurde von Paul Böstro redaktionell geprüft.
Ich schaue mir deine Website an
Im kostenlosen Erstgespräch gehen wir sie gemeinsam durch und klären, wo sie Anfragen verliert.
So arbeite ich: Barrierefreie Website
Über den Autor
Paul Böstro
Ich führe die creativecouch in Butzbach und bin vom BAFA zugelassener Berater. Seit über zwölf Jahren entwickle ich Marken, Websites und digitale Strategien, heute vor allem für Sichtbarkeit bei Google und KI.
Über mich und die creativecouchRatgeber-Abo
Neue Beiträge per E-Mail
Zu jedem neuen Beitrag eine kurze Mail mit Titel, Kern und Link. Meist dienstags bis donnerstags, keine Werbung, abbestellen mit einem Klick.
Lieber per WhatsApp? Freitags die neuen Beiträge der Woche, abmelden mit STOP. Ratgeber per WhatsApp abonnieren (Nutzungsbedingungen)
Weiterlesen
Mehr zu SEO, GEO, KI und Webdesign.
- Beitragsbild: KI-generiert
Beitragsbild: KI-generiertDer WP AI Client: KI-Schnittstelle im WordPress-Core und was das für dich ändert
Seit WordPress 7.0 steckt eine KI-Schnittstelle im Kern. Was sie tut, was sie nicht tut und wo deine Zugangsdaten …
Beitragsbild: KI-generiertWebsite-Kosten bei einer Agentur: Ein Überblick
Erfahre, wie sich Website-Preise zusammensetzen und welche Leistungen den Unterschied machen.