Eine Webflow-Website ist so barrierefrei wie die Person, die sie gebaut hat. Das steht so auch in Webflows eigener Erklärung zur Barrierefreiheit: Die meistgenutzten Elemente sind geprüft, aber beim Bau einer barrierefreien Website liege die Macht bei denen, die bauen [4]. Diese Seite trennt, was Webflow mitbringt, von dem, was Ihre Aufgabe bleibt – auf der Marketing-Website genauso wie im Shop mit Webflow Ecommerce – und nennt die Stellen, die Sie zuerst prüfen sollten.
Gilt das BFSG für Ihre Webflow-Website?
Das hängt davon ab, was die Website tut. Das BFSG erfasst bestimmte Dienstleistungen für Verbraucherinnen und Verbraucher: elektronischer Geschäftsverkehr, Bankdienstleistungen, Telekommunikation, E-Books und Personenbeförderung. Wer über Webflow Ecommerce an Verbraucher verkauft, erbringt eine „Dienstleistung im elektronischen Geschäftsverkehr“ (§ 1 Abs. 3 Nr. 5 BFSG). Dafür gilt das Gesetz seit dem 28. Juni 2025 [1]. Es setzt den European Accessibility Act um; wer in andere EU-Länder verkauft, trifft dort auf vergleichbare nationale Gesetze [2].
Ausgenommen sind Kleinstunternehmen, die Dienstleistungen erbringen: weniger als zehn Beschäftigte und höchstens 2 Mio. € Jahresumsatz oder Jahresbilanzsumme (§ 2 Nr. 17, § 3 Abs. 3 BFSG) [1]. Beide Bedingungen müssen erfüllt sein; Einzelheiten stehen auf unserer Seite zur Ausnahme für Kleinstunternehmen. Viele Start-ups auf Webflow sind klein genug – prüfen Sie beide Werte, statt es anzunehmen. Ein reiner B2B-Shop erbringt keine Dienstleistung für Verbraucher.
Eine reine Marketing-Website ohne Verbrauchergeschäfte ist in der Regel selbst keine der genannten Dienstleistungen – eine Buchungs- oder Bestellfunktion darauf kann es aber sein. Den vollständigen Anwendungsbereich erklärt BFSG und European Accessibility Act, für Shops unser Überblick BFSG für Onlineshops.
Was Webflow mitbringt – und was nicht
Webflow ist ein gehosteter Baukasten, gibt Ihnen aber anders als die meisten das Markup in die Hand. Im Designer wählen Sie für jedes Element das HTML-Tag, die Klassen und eigene Attribute, und Sie können eigenen Code einbinden [3]. Das Hosting und die Skripte hinter Webflows eigenen Komponenten ändern Sie nicht – Sie können eine Komponente nur durch eine selbst gebaute ersetzen. Diese Aufteilung entscheidet, wer was beheben kann.
Sie bekommen:
- Geprüfte Grundelemente. Tabs, Dropdown, Image, Text Link, Link Block, Button, Section, List, List Item, Collection List, Navbar und Slider wurden auf Tastaturbedienung und Screenreader-Unterstützung getestet. Laut Webflow können Websites mit diesen Elementen bis zu WCAG 2.1 AA erreichen [4].
- Kontrolle über die Semantik. HTML5-Tags pro Element, Alt-Text oder die Einstellung „dekorativ“ pro Bild, relative Einheiten für Schrift, eigene Attribute und eigene Fokusstile [3].
- Eingebaute Prüfungen. Das Audit-Panel im Designer untersucht die aktuelle Seite unter anderem auf fehlende Alt-Texte, übersprungene Überschriftenebenen, fehlende Formularbeschriftungen und leere Links [3][5]. Dazu kommen ein Kontrastwerkzeug und eine Vorschau für Sehbeeinträchtigungen [3].
- Reduced-Motion-Bedingungen für Interactions. Jede Interaction lässt sich so einstellen, dass sie bei Besuchern mit der Systemeinstellung „Bewegung reduzieren“ gar nicht abläuft oder direkt zum Endzustand springt [6].
Sie bekommen nicht:
- Eine barrierefreie Website ab Werk. Webflows Aussage gilt für diese Elemente. Alles, was Sie aus Div-Blöcken, Interactions und eigenem Code zusammensetzen, liegt bei Ihnen [4].
- Eine vollständige Prüfung durch das Audit-Panel. Webflow nennt es ausdrücklich keine umfassende Barrierefreiheitsprüfung und verweist auf spezialisierte Testwerkzeuge [5]. Es betrachtet jeweils eine Seite.
- Reduzierte Bewegung, ohne sie einzustellen. Die Bedingung gibt es pro Interaction; eine Interaction ohne sie läuft für alle ab [6].
- Kontrolle über die Ausgabe des Zahlungsanbieters. Warenkorb und Kasse gestalten Sie in Webflow Ecommerce selbst [8]. Bezahlt wird über Stripe oder PayPal, optional mit Apple Pay und Google Pay [9]. Deren Buttons und Felder gehören dem Anbieter.
Was wir auf Webflow-Websites finden
Interactions, die nie aufhören
Webflow-Websites entstehen oft in Designteams, und Bewegung gehört zum Konzept. Gestaffelte Einblendungen beim Laden, Reveals beim Scrollen, Parallax-Abschnitte, endlos laufende Logo-Bänder und Lottie-Animationen sind häufig – die meisten ohne Reduced-Motion-Bedingung. Was sich länger als fünf Sekunden neben anderem Inhalt bewegt, braucht eine Möglichkeit zum Anhalten (WCAG 2.2.2). Große Bewegung beim Scrollen berührt außerdem WCAG 2.3.3, ein AAA-Kriterium – nicht verpflichtend, aber Webflows eigene Checkliste rät aus demselben Grund von Parallax und Scrolljacking ab [7].
Inhalte, die erst nach einer Animation erscheinen
Eine Reveal-Interaction startet Elemente mit Deckkraft 0 und blendet sie beim Scrollen ein. Screenreader lesen sie trotzdem vor, der Tastaturfokus kann auf Links landen, die noch niemand sieht, und bei starker Vergrößerung bleiben ganze Abschnitte leer, bis ein Auslösepunkt überscrollt ist.
Widgets aus Div-Blöcken
Modale Dialoge, Akkordeons, eigene Tabs und Mega-Menüs werden oft aus Div-Blöcken und Klick-Interactions gebaut statt aus Webflows geprüften Elementen. Das Ergebnis hat keine Rolle, keinen Namen, kein aria-expanded und lässt sich mit der Tastatur weder erreichen noch bedienen. Ein Dialog öffnet sich, ohne den Fokus hineinzuholen, und schließt nicht mit Escape – genau das verlangt Webflows Checkliste aber [7].
Tags, Überschriften und Links nach Optik gewählt
Weil jedes Element jedes Tag sein kann, folgt die Struktur dem Design: Überschriften nach Größe, der Seitentitel als div, eine ganze Karte als ein Link Block, der nur ein Bild enthält, Social-Icons als leere Links. Fokuszustände bleiben ungestaltet oder werden weggestaltet.
CMS-Inhalte und Formulare
Bilder in CMS-Collection-Listen haben oft keinen Alt-Text, weil die Collection kein Feld dafür hat. Rich-Text-Felder enthalten eingefügte Überschriften und Tabellen. Native Formulare nutzen häufig Platzhalter statt Beschriftungen, und Erfolgs- wie Fehlermeldungen erscheinen, ohne angesagt zu werden. Davor steht ein Cookie-Banner, meist über eigenen Code oder eine App eingebunden.
Webflow Ecommerce: Varianten, Warenkorb und Kasse
Variantenoptionen, die zu „Pills“ umgestaltet wurden, verlieren Namen und Auswahlzustand. „In den Warenkorb“ öffnet ein Warenkorb-Paneel, ohne den Fokus zu verschieben und ohne Statusmeldung. Die Kasse ist gestaltbar – Beschriftungen, Fehlerzustände und autocomplete-Werte hängen also davon ab, wie sie gestaltet wurde. Buttons und Kartenfelder des Zahlungsanbieters sind in die Seite eingebettet und brauchen eine saubere Fokusreihenfolge.
Wo Sie zuerst prüfen sollten
| Kriterium | Warum bei Webflow | Automatisierbar |
|---|---|---|
| 2.2.2 Pausieren, stoppen, ausblenden (A) | Endlos-Animationen, Logo-Bänder, Autoplay-Slider | Teilweise automatisiert |
| 2.1.1 Tastatur (A) | Dialoge, Akkordeons, Menüs aus Div-Blöcken | Teilweise automatisiert |
| 2.4.3 Fokus-Reihenfolge (A) | Dialoge und Warenkorb-Paneele, verborgene Reveal-Inhalte | Teilweise automatisiert |
| 2.4.7 Fokus sichtbar (AA) | Ungestaltete oder entfernte Fokuszustände | Teilweise automatisiert |
| 4.1.2 Name, Rolle, Wert (A) | Schalter aus Div-Blöcken, Varianten-Pills | Teilweise automatisiert |
| 1.3.1 Info und Beziehungen (A) | Überschriften und Tags nach Optik | Teilweise automatisiert |
| 1.1.1 Nicht-Text-Inhalt (A) | CMS-Bilder ohne Alt-Feld | Teilweise automatisiert |
| 2.4.4 Linkzweck (im Kontext) (A) | Link Blocks nur mit Bild, Icon-Links | Teilweise automatisiert |
| 4.1.3 Statusmeldungen (AA) | Formular-Erfolgsmeldung, Warenkorb | Nur manuell |
| 1.4.3 Kontrast (Minimum) (AA) | Design-Paletten, Text über Bildern | Automatisiert |
„Automatisiert“ heißt: Eine Regel kann das Kriterium allein entscheiden. „Teilweise automatisiert“ heißt: Eine Regel findet einen Teil der Fehler, den Rest muss ein Mensch beurteilen. Alle Kriterien stehen in WCAG 2.2 AA, Kriterium für Kriterium.
Eine sinnvolle Reihenfolge
- Interactions auflisten. Geben Sie jeder Interaction eine Reduced-Motion-Bedingung – „keine Animation“ für Dekoration, „zum Ende springen“ für alles Funktionale wie ein Menü [6] – und ergänzen Sie eine Pause-Schaltfläche für alles, was in Schleife läuft.
- Div-Widgets ersetzen. Wo ein geprüftes Element die Aufgabe erfüllt – Tabs, Dropdown, Navbar, Slider –, nehmen Sie es. Wo nicht, ergänzen Sie Rollen, Namen und Zustände über eigene Attribute und regeln Fokus und Escape im Code.
- Das Audit-Panel auf jeder Vorlage laufen lassen. Es prüft eine Seite nach der anderen. Gehen Sie also jede statische Seite und jedes Collection-Template durch und beheben Sie dort Alt-Texte, Überschriften, Beschriftungen und leere Links [5].
- Das CMS an der Quelle reparieren. Legen Sie in jeder Collection mit Bildern ein Alt-Text-Feld an, verknüpfen Sie es und füllen Sie es für bestehende Einträge.
- Die wichtigsten Strecken mit der Tastatur gehen. Navigation, ein Formular samt Fehlerzustand und im Shop: Produkt → Variante → Warenkorb → Kasse → Zahlung im Testmodus.
- Nach jedem Redesign erneut prüfen. Webflow macht große optische Änderungen billig, und jede kann eine Korrektur rückgängig machen. Ein regelmäßiger Crawl fängt Rückschritte früh ab.
Was Reviseberg auf Webflow-Websites prüft – und was Sie selbst testen
Reviseberg crawlt Ihre veröffentlichte Website einschließlich CMS-Collection- und Produktseiten und führt auf jeder Seite alle axe-core-Regeln in einer Desktop-Breite von 1280 Pixeln aus. Die Regeln, deren Ergebnis vom Layout abhängt – etwa Kontrast und Zielgröße –, laufen zusätzlich bei 360 Pixeln. Die Ergebnisse sind WCAG 2.2 A/AA und EN 301 549 zugeordnet. Befunde werden je Regel zu Issues zusammengefasst und danach sortiert, wie viele Punkte ihre Behebung bringt. Ein Fehler in einer Komponente oder einem Collection-Template erscheint deshalb als ein Issue auf 400 Seiten und nicht als 400 Einzelbefunde. Während das Audit-Panel die im Designer geöffnete Seite betrachtet, sieht der Crawl jede veröffentlichte Seite.
Der Tastatur-Agent öffnet die Seiten einer Journey, die Sie festlegen – Startseite, Produktseite, Warenkorb –, drückt auf jeder Tab, Umschalt+Tab und Escape und protokolliert jeden Schritt. Er meldet unerreichbare Elemente, verschwindenden oder unsichtbaren Fokus, fehlende Skip-Links und Tastaturfallen – genau dort zeigen sich Dialoge und Menüs aus Div-Blöcken. Formulare füllt er nicht aus, und er bestellt nicht. Fehlerzustände, die Kasse hinter einem gefüllten Warenkorb und die Zahlungsfelder gehen Sie also selbst. Der kostenlose Bericht umfasst bis zu 100 Seiten und den Tastatur-Agenten auf einer Seite Ihrer Wahl.
Selbst testen müssen Sie weiterhin: ob Alt-Texte das Bild beschreiben, ob die Bewegung mit eingeschalteter Systemeinstellung „Bewegung reduzieren“ vertretbar ist und wie sich die Website mit Screenreader und Zoom verhält. Agenten für Screenreader, Zoom und Sprachsteuerung sind noch nicht gebaut. Für diese Kriterien gibt es geführte manuelle Tests in der Plattform, und ein Kriterium, das niemand geprüft hat, gilt als ungeprüft – nie als bestanden. Es gibt keine Webflow-App von uns, nichts wird automatisch in Ihre Website eingespielt, und wir setzen kein Overlay-Skript ein.
Geschrieben, um nützlich zu sein, nicht als Rechtsberatung. Stand: 27. September 2026.