Formulare und Cookie-Banner barrierefrei gestalten

Die kurze Antwort: Formulare sind der Ort, an dem aus einer Website ein Vertrag wird, und genau dort setzt das Gesetz an. Das BaFG definiert „Dienstleistungen im elektronischen Geschäftsverkehr“ als Ferndienstleistungen, die elektronisch und auf individuelle Anfrage eines Verbrauchers „im Hinblick auf den Abschluss eines Verbrauchervertrags“ über Websites oder mobile Dienste erbracht werden (§ 3 Z 27) ^[3]. Anlage 1 verlangt dafür, dass Identifizierungs-, Sicherheits- und Zahlungsfunktionen wahrnehmbar, bedienbar, verständlich und robust gestaltet sind ^[7]. In Deutschland steht dasselbe in § 19 BFSGV, ergänzt um die Authentifizierung ^[4]. Buchungsmaske, Warenkorb, Login, Bezahlseite: Das sind alles Formulare. Dieser Artikel ist eine Orientierung, keine Rechtsberatung.

Gleichzeitig sind Formulare der Ort, an dem am meisten schiefgeht. Die WebAIM Million zählte im Februar 2026 auf den Startseiten der eine Million meistbesuchten Websites durchschnittlich 6,9 Formularfelder, 36 % mehr als drei Jahre zuvor; ein Drittel davon, 33,1 %, war nicht korrekt beschriftet, weder über ein Label noch über aria-label, aria-labelledby oder title ^[1]. Auf 51 % aller Startseiten fehlte mindestens eine Beschriftung, ein Anstieg gegenüber 48,2 % im Jahr davor ^[1]. Und das sind nur Startseiten mit Suche und Newsletter-Feld; die eigentlichen Bestell- und Buchungsstrecken hat die Studie nicht gemessen.

Für Agenturen heißt das: Wer ein Formular abnimmt, prüft nicht nur, ob es Daten sendet, sondern ob ein Mensch ohne Maus und ohne Bildschirm es ausfüllen, Fehler verstehen und korrigieren kann. Die zwölf Punkte unten decken das ab, was WCAG 2.2 auf den Stufen A und AA für Formulare verlangt; die beiden neuen Kriterien 3.3.7 Redundante Eingabe und 3.3.8 Barrierefreie Authentifizierung kamen mit Version 2.2 dazu ^[2]. Wer betroffen ist, steht im Artikel Wer ist betroffen?, die Besonderheiten der Kaufstrecke im Artikel zu Onlineshops.

Der Cookie-Banner ist das erste Formular, das jede Besucherin sieht, und für viele die erste Barriere. Ein Dialog, der den Rest der Seite überlagert, muss vier Dinge tun: den Fokus beim Öffnen erhalten, ihn im Dialog halten, sich mit Escape schließen lassen und den Fokus danach an die Stelle zurückgeben, von der er kam. Was dahinterliegt, ist für Tastatur und Screenreader inert, also nicht erreichbar, bis der Dialog geschlossen ist. Diese Regeln folgen aus 2.1.2 Keine Tastaturfalle und 2.4.3 Fokus-Reihenfolge ^[6]; das native dialog-Element mit showModal() erledigt den größten Teil davon von selbst.

WCAG 2.2 schärft nach: Nach 2.4.11 darf ein Element, das Tastaturfokus erhält, nicht vollständig von Inhalten verdeckt sein, die der Autor eingeblendet hat, zum Beispiel von einem Banner, das am unteren Rand klebt ^[2]. Wer mit Tab durch die Seite geht, während der Cookie-Hinweis offen ist, und den Fokus hinter dem Banner verliert, hat genau diesen Fehler vor sich. Dazu kommt die Zielgröße von 24 × 24 CSS-Pixeln für die Buttons (2.5.8), auch für das kleine X zum Schließen ^[2].

Der Test von Aktion Mensch zu den meistbesuchten deutschen Online-Shops im Juni 2025 nennt eingeblendete Banner und Cookie-Overlays, die den Hauptinhalt verdecken und sich nicht ohne Weiteres schließen lassen, ausdrücklich als Hürde; nur 20 von 65 Shops waren überhaupt allein per Tastatur bedienbar, und die meisten boten keinen sichtbaren Tastaturfokus ^[5]. Für den Banner selbst gelten dieselben Formularregeln wie oben: Alle Buttons haben einen Namen, „Ablehnen“ ist genauso erreichbar und genauso groß wie „Akzeptieren“, Kontraste stimmen, und nichts ist nur über Farbe unterscheidbar. Welche Einwilligungen ein Banner einholen muss und wie die Buttons rechtlich zu gestalten sind, ist eine Datenschutzfrage; dazu gilt wie überall auf dieser Seite: Orientierung, keine Rechtsberatung.

Dieselben Regeln gelten für jedes andere Overlay: Newsletter-Popup, Sprachauswahl, Produktzoom, Login-Fenster. Die Gegenüberstellung unten zeigt an vier typischen Stellen, woran Formulare in Prüfungen scheitern und wie die bestandene Variante aussieht.