Was macht ein Formular barrierefrei?

Ein barrierefreies Formular können alle ausfüllen, auch Menschen, die einen Screenreader, eine Tastatur statt einer Maus, eine Vergrößerungssoftware oder einen kleinen Bildschirm nutzen. In der Praxis heißt das: sichtbare Beschriftungen, die mit ihren Feldern verknüpft sind, ein Formular, das komplett mit der Tastatur funktioniert, Fehlermeldungen, die in Worten erklären, was zu korrigieren ist, genug Kontrast und Raum zum Zoomen.

Reicht ein Platzhaltertext als Beschriftung?

Nein. Platzhaltertext verschwindet, sobald jemand zu tippen beginnt, ist wegen des schwachen Kontrasts oft schlecht lesbar und wird von Screenreadern nicht immer zuverlässig vorgelesen. Nutz eine echte Beschriftung, die sichtbar bleibt, und den Platzhalter höchstens für ein Beispiel.

Wie teste ich, ob mein Formular barrierefrei ist?

Füll es zuerst nur mit der Tastatur aus, zoom auf die doppelte Größe und mach absichtlich einen Fehler, um zu sehen, wie die Meldung ankommt. Probier danach einen Screenreader aus und lass ein automatisches Prüftool drüberlaufen. Automatische Tools finden vieles, aber nicht alles. Selbst testen und von echten Nutzern testen lassen lohnt sich also weiterhin.

Bringt ein barrierefreies Formular auch Menschen ohne Behinderung etwas?

Ja. Klare Beschriftungen, hilfreiche Fehlermeldungen, guter Kontrast und automatisches Ausfüllen machen ein Formular für alle schneller und einfacher, zum Beispiel auf dem Handy bei grellem Licht, mit nur einer freien Hand oder wenn es eilig ist. Barrierefreiheit ist zum großen Teil einfach gutes, klares Design.

Ein barrierefreies Formular erstellen, das alle ausfüllen können

Ein Formular ist ein kleines Gespräch. Du fragst, jemand antwortet. Aber wenn diese Person die Frage nicht sehen kann, nicht an den Button kommt oder nicht versteht, warum ihre Antwort abgelehnt wird, ist das Gespräch vorbei, bevor es angefangen hat. Beschweren wird sich niemand. Die Leute gehen einfach.

Das passiert öfter, als man denkt, und nicht nur Menschen mit einer Behinderung. Wer einen Screenreader nutzt, wer alles mit der Tastatur erledigt, wer zittrige Hände hat, wer farbenblind ist oder einfach dein Formular mit einer Hand auf dem Handy in der prallen Sonne ausfüllt: Sie alle stoßen auf dieselben Hürden. Die gute Nachricht: Die meisten Lösungen sind klein, und das Formular wird dadurch für alle angenehmer.

Gib jedem Feld eine sichtbare Beschriftung

Jedes Feld braucht eine Beschriftung, die sagt, was hinein soll, und die beim Tippen sichtbar bleibt.

Verlass dich nicht auf Platzhaltertext. Grauer Text im Feld verschwindet, sobald jemand zu tippen beginnt. Dann lässt sich nicht mehr nachsehen, wofür das Feld war. Oft ist der Kontrast obendrein zu schwach. Setz eine echte Beschriftung über das Feld und nutz den Platzhalter höchstens für ein Beispiel.
Verknüpf die Beschriftung mit dem Feld. Im Code gehört die Beschriftung fest zu ihrem Feld, damit ein Screenreader „E-Mail-Adresse“ vorliest, wenn jemand dort landet. Netter Nebeneffekt: Ein Klick auf die Beschriftung setzt den Cursor ins Feld, und die Klickfläche wird größer.
Fass zusammengehörige Fragen zu einer Gruppe zusammen. Eine Reihe Optionsfelder oder Checkboxen braucht eine Gruppenbeschriftung mit der eigentlichen Frage, etwa „Wie sollen wir dich kontaktieren?“. Ohne sie hört jemand mit Screenreader nur „E-Mail, Telefon, Post“ und weiß nicht, worum es geht.
Halte Beschriftungen kurz und klar. „Deine E-Mail-Adresse“ sagt mehr als „Kontaktdaten (primär)“. Wenn du mehr erklären musst, setz einen kurzen Hinweis unter die Beschriftung.

Mach Hinweise leicht auffindbar

Hinweise helfen nur, wenn man sie rechtzeitig sieht.

Setz Hinweise vor das Feld, nicht dahinter. Braucht ein Passwort eine bestimmte Länge oder ein Datum ein bestimmtes Format, sag das zwischen Beschriftung und Feld. Verknüpf den Hinweis auch mit dem Feld, damit Screenreader ihn mitlesen.
Kennzeichne Pflichtfelder in Worten. Ein Sternchen allein wird leicht übersehen und erklärt sich nicht selbst. Schreib „Pflichtfeld“ oder „(optional)“, je nachdem, was du seltener brauchst, und sag oben, welche Kennzeichnung du verwendest.
Versteck wichtige Informationen nicht in einem Tooltip. Was nur beim Darüberfahren mit der Maus erscheint, ist per Tastatur und auf einem Touchscreen schwer erreichbar.

Sorg dafür, dass alles mit der Tastatur funktioniert

Viele Menschen benutzen nie eine Maus: blinde Menschen, Menschen mit eingeschränkter Handbeweglichkeit und auch viele, die mit der Tastatur einfach schneller sind. Dein Formular sollte komplett mit der Tab-Taste, den Pfeiltasten, der Leertaste und Enter bedienbar sein.

Eine logische Reihenfolge. Mit Tab geht es in der Lesereihenfolge durch die Felder, von oben nach unten.
Ein sichtbarer Fokus. Man muss sehen, wo man gerade ist. Entfern den Fokusrahmen nie, ohne einen deutlichen Ersatz einzubauen.
Keine Sackgassen. Pop-ups, Datumsauswahlen und selbstgebaute Auswahllisten sind die Stellen, an denen Menschen am häufigsten hängen bleiben. Prüf, ob du sie nur mit der Tastatur öffnen, bedienen und wieder schließen kannst.
Kümmer dich um den Fokus, wenn sich der Bildschirm ändert. Zeigt dein Formular eine Frage nach der anderen oder öffnet sich ein neuer Schritt, setz den Fokus auf die neue Frage. So merken auch Screenreader-Nutzer, dass sich etwas getan hat.

Schreib Fehlermeldungen, die weiterhelfen

Eine Fehlermeldung sollte sich anfühlen wie eine freundliche Hand auf der Schulter, nicht wie ein roter Stempel.

Sag, was jetzt zu tun ist. „Diese E-Mail-Adresse sieht unvollständig aus. Magst du sie kurz prüfen?“ hilft. „Ungültige Eingabe“ nicht.
Zeig die Meldung direkt am Feld und verknüpf sie damit, damit sie vorgelesen wird, wenn jemand zum Korrigieren zurückgeht.
Verlass dich nicht nur auf Farbe. Ein roter Rahmen sagt nichts, wenn man Rot nicht sieht. Ergänz ein Symbol und vor allem Worte.
Behalte, was schon eingegeben wurde. Niemand sollte wegen eines kleinen Fehlers seine Antworten verlieren.
Bei längeren Formularen hilft eine kurze Übersicht oben mit Links zu allen Feldern, die noch Aufmerksamkeit brauchen. Setz den Fokus nach dem Absenden dorthin.
Unterbrich niemanden beim Tippen. Prüf ein Feld, wenn es verlassen oder das Formular abgeschickt wird, nicht nach jedem Tastendruck.

Achte auf Kontrast und Farbe

Hellgrauer Text auf weißem Hintergrund wirkt ruhig, ist aber für viele Menschen schwer lesbar, und auf dem Handy in der Sonne für fast alle.

Text braucht genug Kontrast zum Hintergrund. Die weit verbreiteten WCAG-Richtlinien verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5 zu 1.
Auch Feldränder und Buttons zählen. Man muss erkennen können, wo ein Feld anfängt und aufhört. WCAG verlangt für die Ränder von Bedienelementen wie Feldern und Checkboxen mindestens 3 zu 1.
Prüf beide Darstellungen. Hat dein Formular einen Dark Mode, schau dir den Kontrast auch dort an.
Lass Farbe nie allein die Bedeutung tragen: nicht bei Fehlern, nicht bei Pflichtfeldern und nicht bei der gewählten Option.

Lass Platz zum Tippen, Zoomen und automatischen Ausfüllen

Mach Klickflächen groß genug. Kleine Checkboxen und winzige Links dicht nebeneinander sind mit dem Finger oder einer zittrigen Hand schwer zu treffen. Anklickbare Beschriftungen helfen hier sehr.
Lass Zoomen zu. Sperr das Zoomen auf dem Handy nicht, und prüf, ob das Formular mit vergrößertem Text noch funktioniert, ohne dass Teile seitlich aus dem Bild rutschen.
Nutz die passenden Feldtypen und das automatische Ausfüllen. Ein E-Mail-Feld, das die E-Mail-Tastatur öffnet, und Felder, die der Browser selbst ausfüllen kann, sparen Tipparbeit. Das hilft Menschen mit eingeschränkter Handbeweglichkeit oder einem Gedächtnis, das nicht immer mitspielt.

Keine Eile und keine Überraschungen

Vermeide knappe Zeitlimits. Muss eine Sitzung ablaufen, warn vorher und lass die Leute um mehr Zeit bitten.
Ändere nichts ohne Vorwarnung. Wer eine Option auswählt, sollte nicht plötzlich auf einer anderen Seite landen oder das Formular abgeschickt haben.
Sei vorsichtig mit Rätseln. Ein CAPTCHA kann für Menschen mit Seh- oder kognitiven Einschränkungen unlösbar sein. Freundlichere Möglichkeiten beschreiben wir in Spam im Formular verhindern, ohne echte Menschen zu nerven.
Sag, was nach dem Absenden passiert. Eine klare Dankesmeldung, die auch Screenreader vorlesen, zeigt, dass die Antworten wirklich angekommen sind.

Teste es selbst, in zehn Minuten

Du musst kein Profi sein, um die größten Probleme zu finden.

Leg die Maus weg und füll das ganze Formular nur mit der Tastatur aus. Kommst du überall hin, siehst du, wo du bist, und kannst du es abschicken?
Zoom auf die doppelte Größe. Ist noch alles lesbar und bedienbar?
Mach absichtlich einen Fehler. Ist klar, was schiefging und wie du es behebst, auch ohne auf Farbe zu achten?
Probier einen Screenreader aus, etwa VoiceOver auf dem Mac oder iPhone oder NVDA unter Windows. Hörst du bei jedem Feld eine klare Frage?
Lass ein automatisches Prüftool drüberlaufen. Es findet schnell Dinge wie fehlende Beschriftungen und schwachen Kontrast, kann aber nicht alles beurteilen. Die Schritte oben bleiben also nötig.

Und wenn möglich: Bitte ein paar Menschen, die täglich mit Hilfsmitteln arbeiten, dein Formular auszuprobieren. Sie finden Dinge, die keine Checkliste findet.

Die schnelle Checkliste

Jedes Feld hat eine sichtbare Beschriftung, die stehen bleibt und mit dem Feld verknüpft ist.
Zusammengehörige Optionen sind unter einer klaren Frage gruppiert.
Hinweise stehen vor dem Feld; Pflicht oder optional steht in Worten da.
Das ganze Formular funktioniert mit der Tastatur, mit einem gut sichtbaren Fokus.
Fehlermeldungen sagen, was zu korrigieren ist, stehen am Feld und verlassen sich nicht auf Farbe.
Nach einem Fehler bleibt erhalten, was schon eingegeben wurde.
Text und Feldränder haben genug Kontrast, in jeder Darstellung.
Das Formular funktioniert vergrößert und auf einem kleinen Bildschirm.
Felder haben den passenden Typ und unterstützen automatisches Ausfüllen.
Keine knappen Zeitlimits, keine überraschenden Seitenwechsel und am Ende eine klare Bestätigung.

Diese Schritte decken die häufigsten Probleme ab, ersetzen aber keine vollständige Prüfung der Barrierefreiheit. Muss dein Formular eine gesetzliche oder vertragliche Vorgabe erfüllen, lass es gründlich prüfen.

So denken wir bei Cuppaform darüber

Cuppaform ist noch im Aufbau, und wir möchten, dass Barrierefreiheit einfach zum Formular dazugehört, nicht als Extra, an das du selbst denken musst. Die Seiten dieser Website, einschließlich Warteliste und Kontaktformular, prüfen wir mit einem automatischen Prüftool für Barrierefreiheit, im hellen und im dunklen Modus. Während wir den Formular-Builder bauen, arbeiten wir an sinnvollen Voreinstellungen: sichtbare Beschriftungen, klare Fehlermeldungen in einfachen Worten und Formulare, die sich mit der Tastatur bedienen lassen.

Probier die Demo aus und erlebe, wie sich ein freundliches Formular von der anderen Seite anfühlt.