Formulare — hier scheitern die meisten.

Beschriftungen.

Jedes Eingabefeld braucht eine Beschriftung, die sichtbar ist, dauerhaft stehen bleibt und im Code mit dem Feld verknüpft ist. Die Verknüpfung ist der Teil, den man nicht sieht und der entscheidet: Ohne sie liest ein Screenreader beim Eintreten in das Feld „Eingabefeld“ und sonst nichts.

Ein angenehmer Nebeneffekt der richtigen Verknüpfung: Ein Klick auf die Beschriftung setzt den Fokus ins Feld. Das ist gleichzeitig der einfachste Test — klick auf „E-Mail“ und sieh nach, ob der Cursor ins Feld springt. Tut er es nicht, fehlt die Verknüpfung.

Bei Feldern ohne sichtbare Beschriftung — etwa einem Suchfeld mit Lupensymbol — muss die Beschriftung zumindest für Hilfsmittel vorhanden sein. Sichtbar ist trotzdem besser.

Das Problem mit Platzhaltern.

Der graue Text im Feld ist beliebt, weil er aufgeräumt wirkt. Er ist als Beschriftung aber untauglich, aus vier Gründen:

• Er verschwindet beim Tippen — wer abgelenkt wird, weiß nicht mehr, was in das Feld gehört.
• Er hat oft zu wenig Kontrast, weil er grau sein soll.
• Er wird nicht zuverlässig als Beschriftung ausgewertet.
• Beim Prüfen vor dem Absenden sieht man nicht mehr, welches Feld welches ist.

Richtig ist: Beschriftung über dem Feld, Platzhalter höchstens als zusätzliches Beispiel — und selbst das ist verzichtbar. Beispiele gehören besser in einen Hilfetext unter das Feld.

Pflichtfelder.

Pflichtfelder werden häufig nur durch einen roten Rahmen oder ein rotes Sternchen gekennzeichnet. Beides ist für sich allein zu wenig: Farbe ist keine Information, und ein Sternchen ohne Erklärung ebenfalls nicht.

Besser: Das Wort „Pflichtfeld“ oder „erforderlich“ in der Beschriftung, dazu die technische Kennzeichnung im Code, damit Hilfsmittel es ansagen. Wenn ein Sternchen verwendet wird, gehört oben eine Legende hin — und die muss vor dem Formular stehen, nicht darunter.

Noch besser ist, die Zahl der Pflichtfelder zu senken. Jedes Feld, das nicht gebraucht wird, ist eine Hürde für alle (Kontaktformulare).

Fehlermeldungen.

Hier liegt der häufigste echte Ausschluss im ganzen Web. Der typische Ablauf: Absenden, Seite springt nach oben, irgendwo ist etwas rot. Wer das Rot nicht sieht, sitzt vor einer Seite, auf der scheinbar nichts passiert ist — und versucht es noch dreimal, bevor er aufgibt.

Die letzte Zeile ist kein Barrierefreiheitskriterium im engeren Sinn, aber sie entscheidet darüber, ob jemand einen zweiten Versuch macht. Ein Formular, das bei einem Fehler alles leert, wird nicht noch einmal ausgefüllt.

Prüfe Fehlermeldungen immer absichtlich: Formular falsch ausfüllen, absenden, und dann mit geschlossenen Augen überlegen, ob du wüsstest, was los ist.

Gruppieren und Hilfetexte.

Zusammengehörige Felder gehören gruppiert und beschriftet — etwa Anrede-Optionen, eine Adresse oder eine Auswahl aus Versandarten. Ohne Gruppierung liest ein Screenreader nur die einzelnen Optionen vor, ohne die Frage, zu der sie gehören.

Hilfetexte — „mindestens acht Zeichen“, „Format TT.MM.JJJJ“ — müssen dem Feld zugeordnet sein, damit sie mitgelesen werden, und sie gehören vor die Eingabe, nicht erst in die Fehlermeldung. Jemandem nach dem Absenden mitzuteilen, welche Regeln gelten, ist vermeidbarer Ärger.

Eingabehilfen.

• Richtiger Feldtyp: E-Mail, Telefon, Zahl — dann erscheint auf dem Handy die passende Tastatur.
• Automatisches Ausfüllen erlauben, damit gespeicherte Daten übernommen werden. Das hilft besonders bei motorischen Einschränkungen.
• Keine erzwungenen Formate, die der Nutzer raten muss — Leerzeichen in einer Telefonnummer darf das Formular selbst entfernen.
• Großzügige Felder, auch für lange Namen und Adressen.
• Datumsfelder auch per Tastatur eingebbar, nicht nur über einen Kalender zum Anklicken.

Der letzte Punkt ist bei Buchungsformularen der Dauerbrenner: Ein Kalender, der sich nur mit der Maus bedienen lässt, macht die Buchung unmöglich.

Bildabfragen zur Spamabwehr.

Eine Abfrage, bei der Zeichen aus einem verzerrten Bild gelesen oder Ampeln in Kacheln gesucht werden müssen, schließt Menschen vollständig aus. Audio-Alternativen helfen nur begrenzt und nicht allen.

Für die allermeisten Websites ist das auch gar nicht nötig. Es gibt Verfahren, die ohne Mitwirkung auskommen: ein verstecktes Feld, das nur automatische Programme ausfüllen; eine Zeitmessung, weil Maschinen zu schnell sind; eine serverseitige Bewertung; eine einfache Rechenaufgabe als Text. Für ein Kontaktformular mit zwanzig Anfragen im Monat reicht das (Formular-Spam stoppen).

Wenn doch eine Prüfung nötig ist, dann eine, die im Hintergrund arbeitet und nur im Verdachtsfall nachfragt — und dann mit einer Alternative.

Zeitlimits und Sitzungen.

Manche Formulare laufen ab — Buchungsstrecken mit reserviertem Kontingent, Kassen mit Sitzungsdauer, Anmeldungen mit Zeitfenster. Wer langsamer ausfüllt, weil er eine Vergrößerung benutzt oder mit einer Spracheingabe arbeitet, verliert dann alles.

Verlangt ist, dass sich Zeitlimits verlängern, abschalten oder zumindest rechtzeitig ankündigen lassen — mit genug Vorlauf, um zu reagieren. Und die Eingaben sollten erhalten bleiben (Warenkorb leert sich).

Mehrstufige Formulare.

Bei mehreren Schritten kommt dazu: Der aktuelle Schritt muss erkennbar und angesagt sein, der Fortschritt nachvollziehbar, das Zurückgehen möglich, ohne Eingaben zu verlieren, und der Fokus muss beim Schrittwechsel an den Anfang des neuen Schritts springen — sonst steht man im Nichts.

Außerdem: Die Zusammenfassung vor dem Absenden ist bei folgenreichen Vorgängen nicht nur guter Stil, sondern Teil der Anforderungen. Sie muss die Möglichkeit bieten, zurückzugehen und zu korrigieren (Kasse).

Nach dem Absenden.

Auch der Erfolg muss ankommen. Eine grüne Fläche mit Häkchen ist keine Rückmeldung für jemanden, der sie nicht sieht. Entweder führt der Weg auf eine eigene Seite mit einer Überschrift, die den Erfolg benennt — das ist die robusteste Lösung —, oder die Meldung wird an Ort und Stelle angesagt und bekommt den Fokus.

Die Meldung sollte außerdem sagen, was als Nächstes passiert: „Wir melden uns innerhalb eines Werktags“ ist besser als „Danke“.

Selbst prüfen.

1. Auf jede Beschriftung klicken — springt der Fokus ins Feld?
2. Nur mit Tabulator durch das ganze Formular bis zum Absendeknopf.
3. Absichtlich Fehler machen und absenden.
4. Augen schließen und überlegen, ob die Meldung ausreicht.
5. Kalender und Auswahlfelder ohne Maus bedienen.
6. Auf 200 Prozent zoomen — passt noch alles?
7. Auf dem Handy ausfüllen, mit großer Schrift.

Diese sieben Schritte dauern bei einem Formular zehn Minuten und finden fast alles, was zählt (Gründlich prüfen).

Wenn du nicht weiterkommst.

Wenn deine Formulare Anfragen kosten, weil Menschen nicht hindurchkommen. Ich prüfe deine Website, sortiere die Mängel danach, wen sie tatsächlich aussperren, und behebe sie: Website prüfen lassen. Was das grob kostet und wovon es abhängt, steht unter Aufwand und Kosten.

Orientierungswerte, keine Fixpreise — nach einem kurzen Gespräch bekommst du ein Festpreisangebot.

Wer hilft.

Ich bin Manuel Killert, Webentwickler aus Quakenbrück. Ich baue Websites und Shops mit WordPress und repariere, was andere hinterlassen haben. Barrierefreiheit ist dabei kein Zusatzmodul, sondern Handwerk: ordentliches HTML, Beschriftungen, die stimmen, Bedienbarkeit per Tastatur, ausreichende Kontraste und Formulare, die Fehler verständlich melden.

Was ich mache: bestehende Websites prüfen, die Mängel nach Wirkung sortieren, sie beheben und dir zeigen, worauf deine Redaktion künftig achten muss. Was ich nicht mache: Rechtsberatung und Zertifikate. Für eine förmliche Prüfung durch eine Prüfstelle oder eine anwaltliche Einschätzung bist du woanders besser aufgehoben — und ich sage dir das, wenn dein Fall dort hingehört.

Ich arbeite ohne Overlay-Werkzeuge. Die versprechen eine schnelle Lösung und liefern sie nicht; warum, steht ausführlich auf einer eigenen Seite.