Webflow-Barrierefreiheit
Mach deine Webflow-Seite wirklich barrierefrei. EAA & WCAG, ohne Overlay
Webflow gibt dir Pixel-Kontrolle, aber keine eingebaute Barrierefreiheit: der Designer lässt aria-* bei komplexen Komponenten standardmäßig weg. Wir finden die Hürden und liefern die Lösung in deinen eigenen Custom Attributes, kein Widget, das deine Seite verlangsamt.
So packt Seviranta deine Webflow-Website an der Quelle an
Wo sich die Barrieren verstecken
Themes, Erweiterungen und Formulare führen stille Barrieren ein. Wir finden sie alle.
Die Korrektur in der Quelle, nicht darüber
Konkrete Korrekturen in Ihrem Webflow-Setup, keine Overlay-Schicht, die die Fehler nur verbirgt.
Kein Widget, keine Verzögerung
Wir crawlen extern von EU-Servern, 0% Auswirkung auf Ihre Ladegeschwindigkeit und Core Web Vitals.
Bereit für die EAA
Wir prüfen deine Website gegen WCAG, auf dem Niveau, auf dem Aufsichtsbehörden prüfen.
Headless-Scan mit axe-core, derselben Engine, die in Google Lighthouse steckt, von unseren EU-Servern aus. 0% Einfluss auf deine Ladegeschwindigkeit.
Die Wahrheit: Webflow ist nicht automatisch barrierefrei
Der Webflow Designer liefert sauberes HTML, und Webflows eigene Komponenten (Tabs, Dropdown, Navbar, Slider) sind laut Webflow selbst ARIA- und tastaturzugänglich. Schief geht es bei dem, was du selbst baust: Tabs, Modals und Buttons aus Divs mit Interaktionen bekommen keine Rolle und keinen Status, den Fokus-Stil musst du überall selbst setzen, das Audit panel prüft nur vier Dinge und die Lightbox unterstützt keinen Alt-Text. Genau dort landen die Befunde.
Was wirklich auf dem Spiel steht
- Ein nicht barrierefreier Checkout ist ein direkter EAA-Verstoß.
- Ein Barrierefreiheits-Widget gilt nicht als strukturelle Lösung.
- Aufsichtsbehörden testen das generierte HTML, inklusive deiner Apps.
- „Wir nutzen Webflow“ ist keine rechtliche Verteidigung: Die Verantwortung liegt beim Webshop, der live ist, nicht bei der Plattform.
Was Warten kosten kann
bis € 1.000.000
EU-Maximum · Spanien/Luxemburg
$ 4.000
USA · Kalifornien (Unruh), pro Besuch
Du wirst nicht aus dem Nichts mit einem Bußgeld belegt, zuerst kommt eine Mängelbeseitigungsanordnung mit Frist. Aber wer dann ein datiertes Dossier vorlegen kann, kommt am günstigsten davon.
Sieh, was für deinen Absatzmarkt gilt →Das versteckte Risiko von Drittanbieter-Webflow-Erweiterungen
Review-Widgets, Filter, Bundler und Such-Apps schleusen dynamisches HTML in dein Frontend, und jedes App-Update kann eine neue Barriere hinzufügen. In einem Audit zählt dieser Code voll mit, auch wenn du ihn nicht selbst geschrieben hast. Deshalb überwacht Seviranta laufend das Endergebnis so, wie eine Aufsichtsbehörde es sieht: dein Webflow-Theme plus alle Apps und dynamischen Inhalte.
Was auf Webflow häufig schiefgeht
- Custom Tabs ohne role und aria-selectedBaust du deine eigenen Tabs im Designer, bleiben es gewöhnliche Divs. Ohne role="tab", aria-selected und aria-controls auf den Tab-Buttons weiß ein Screenreader nicht, dass es sich um Tabs handelt oder welcher aktiv ist. Du fügst sie manuell über die Custom Attributes hinzu.
- Dropdowns und Modals ohne Keyboard-Trap-ManagementWebflows Interaktionen öffnen ein Dropdown oder Modal oft, ohne den Fokus zu verschieben oder festzuhalten. Tastaturnutzer tabben hinter das Overlay weg und verlieren den Inhalt aus den Augen.
- Div-Buttons ohne role und tabindexEin Div mit einer Click-Interaktion sieht aus wie ein Button, ist aber keiner. Ohne role="button" und tabindex="0" über die Custom Attributes ist er für Tastatur- und Screenreader-Nutzer unerreichbar.
- Lightbox-Bilder ohne Alt-TextWebflows Lightbox unterstützt keinen Alt-Text für die Bilder darin, und das Audit panel meldet das nicht. Jedes Produktfoto oder Portfolio-Bild in einer Lightbox ist dadurch für Screenreader unsichtbar. Wähle einen anderen Galerie-Aufbau oder beschreibe das Bild im umgebenden Text.
So sieht eine echte Lösung aus
Nimm eine Custom-Tab-Komponente, die du im Designer aus Divs aufgebaut hast. Ein Screenreader hört dann nur „Gruppe“ statt einer Tab-Reihe. Die Lösung liegt vollständig in den Custom Attributes, kein Neuaufbau: setze role="tab", aria-selected und aria-controls auf die Tab-Buttons.
<div class="tab-link">Overzicht</div><div class="tab-link"
role="tab"
aria-selected="true"
aria-controls="panel-overzicht">Overzicht</div>Wo du es in Webflow selbst regelst
Webflow hat mehr eingebaut als die meisten No-Code-Tools, aber die Werkzeuge decken nur einen Teil der WCAG ab. Das sind die fünf Stellen, an denen du im Designer selbst den Unterschied machst, und was du außerhalb davon lösen musst.
- 1Audit panel: vier Prüfungen, nicht mehrDas Audit panel (linke Toolbar, Option/Alt + U) prüft genau vier Dinge: fehlenden Alt-Text, nicht beschreibende Linktexte, übersprungene Überschriftenebenen und doppelte Element-IDs. Farbkontrast, alles innerhalb von Components, Lightbox-Medien und CMS-gebundene Bilder bleiben außen vor. Grün im Audit panel ist also kein WCAG-Grün.
- 2Alt-Text: beschreibend oder dekorativSetze den Standard-Alt-Text pro Asset im Assets panel (Zahnrad → Descriptive oder Decorative) und überschreibe ihn pro Instanz über Image settings → Alt text. Decorative erzeugt einen leeren Alt-Text, sodass Screenreader das Bild überspringen. Alt-Text in einer Lightbox wird nicht unterstützt; wähle dort einen anderen Galerie-Aufbau.
- 3Fokus sichtbar machenWebflows eigene Komponenten sind laut Webflow ARIA- und tastaturzugänglich, aber den Fokus-Stil musst du selbst setzen. Style panel → States → 'Focused (keyboard)' und gib ihm eine deutliche Outline; bei Slider-Dots geht das nur über Custom CSS auf .w-slider-dot:focus.
- 4Custom attributes für alles, was du selbst baustBaust du Tabs, Modals oder Buttons aus Divs und Interaktionen, weiß ein Screenreader nicht, was sie sind. Element settings → Custom attributes → '+' und füge role, aria-label, aria-expanded oder tabindex hinzu. Attribute lassen sich auch an CMS-Felder und Component-Properties binden, sodass du sie nur einmal setzt.
- 5Skip-Link und BewegungEin 'Skip to content'-Link ist in Webflow nicht eingebaut; du baust ihn selbst als erstes Element im Header, unsichtbar bis zum Fokus, mit einem kleinen Script unter Project settings → Custom code. Animationen: Stelle Interaktionen bei prefers-reduced-motion auf 'no animation' oder 'skip to end' und gib Hintergrundvideos einen Play/Pause-Button.
Webflow sagt es selbst: Getestete Elemente entsprechen 'bis zu' WCAG 2.1 AA, und das Tool macht es leicht, nicht barrierefreie Inhalte zu veröffentlichen. Unser Scan prüft die veröffentlichte Seite, genau das, was eine Aufsichtsbehörde sieht, unabhängig davon, was das Audit panel grün markiert.
Was du bekommst
Pro Fehler: was, warum und wie
Für jeden Befund siehst du, was falsch ist, wen es betrifft, welche WCAG-Regel betroffen ist und eine konkrete, Webflow-bewusste Lösung, mit Codebeispiel, wo möglich.
Plattformspezifische Erkennung
Du fängst die Fehler ab, die gerade auf Webflow entstehen, nicht nur das, was ein generischer WCAG-Check erkennt.
Ein Dossier, das standhält
Eine datierte Übersicht deiner Scans und Befunde, die du bei einem Audit oder einer Inspektion vorlegen kannst.
Bei einem Reporting-Tool zahlst du die Lizenz und deine Entwickler, um die Fehler zu beheben. Bei Seviranta ist die Lösung inbegriffen, keine doppelte Rechnung.
Schütze deine Conversion und deinen rechtlichen Status
Eine App, die ein Barrierefreiheits-Icon über deine Webflow-Seite klebt, ist ein Risiko für dein Business. Die Fakten im Überblick:
Webflow-Barrierefreiheits-Widgets
- Laden zusätzliche externe Skripte, die deine Ladegeschwindigkeit (LCP) und damit deine Conversion schädigen.
- Verschleiern den Fehler, statt ihn zu lösen, der zugrunde liegende Code bleibt fehlerhaft.
- Schützen nicht vor Ansprüchen. Die FTC verhängte 2025 gegen den Overlay-Anbieter accessiBe eine Strafe von 1 Million $ wegen irreführender Compliance-Versprechen.
Der Seviranta-Ansatz
- 0 % Einfluss auf deine Ladegeschwindigkeit, wir scannen extern von unseren EU-Servern.
- Wir beheben den echten Quellcode deiner Webflow-Templates.
- Wir bauen automatisch dein aufbewahrbares EAA-Dossier auf, bereit, es einer Aufsichtsbehörde vorzulegen.
Fragen und Antworten
- Webflow ist doch schon barrierefrei, warum fällt meine Seite dann durch?
- Webflows eigene Komponenten sind laut Webflow ARIA- und tastaturzugänglich, aber alles, was du selbst aus Divs und Interaktionen baust, deine Farbwahl, deine Alt-Texte und deine Überschriftenreihenfolge liegen bei dir. Dort sitzen die meisten Befunde, und das Audit panel sieht sie größtenteils nicht.
- Gilt das BFSG auch für meine Webflow-Seite?
- Das BFSG (Barrierefreiheitsstärkungsgesetz) gilt seit dem 28. Juni 2025 für B2C-Onlineshops und -Dienste (Dienstleistungen im elektronischen Geschäftsverkehr). Ausgenommen sind Kleinstunternehmen, die Dienstleistungen anbieten: weniger als zehn Beschäftigte und höchstens 2 Mio. Euro Jahresumsatz oder Jahresbilanzsumme. Zuständig ist die Marktüberwachungsstelle der Länder für die Barrierefreiheit (MLBF), Bußgelder sind bis zu 100.000 Euro möglich. Maßstab ist WCAG 2.1 AA über die EN 301 549. Beurteilt wird die veröffentlichte Seite, nicht das Bautool: Was Webflows Audit panel nicht prüft (Kontrast, Components, Lightbox), zählt trotzdem.
- Kann Seviranta den Fix in Webflow für mich umsetzen?
- Wir liefern pro Befund die exakte Stelle (Selektor) und den Fix: welches Custom attribute, welcher Alt-Text, welcher Fokus-Stil. Umgesetzt wird er von dir oder deinem Webflow-Entwickler im Designer. Wir brauchen keinen Zugriff auf dein Projekt und platzieren kein Script auf deiner Seite.
- Reicht ein Webflow-Barrierefreiheits-Widget für den EAA?
- Nein. Ein Widget legt eine Schicht über deine Seite, behebt aber den zugrunde liegenden Code nicht und gilt nicht als strukturelle Compliance.
- Fällt mein Webflow-Checkout unter den EAA?
- Ja. Der Checkout und die Navigation sind ausdrücklich Teil der Verpflichtung nach WCAG 2.1 AA.
- Scannt Seviranta auch meine Webflow-Apps?
- Ja. Wir testen das endgültig generierte HTML. Theme plus Apps, so, wie es eine Aufsichtsbehörde tut.
- Verlangsamt das meine Webflow-Seite?
- Nein. Wir scannen extern von unseren EU-Servern; es kommt kein Skript auf deine Seite. 0 % Einfluss auf deine Ladegeschwindigkeit und Core Web Vitals.
Wir machen es selbst auch
Wir halten uns an genau dieselbe Messlatte: Unsere eigene Seite erzielt 0 Fehler in axe-core, derselben Engine, die in Google Lighthouse steckt und mit der wir auch deinen Webflow-Shop scannen. Was eine Maschine sicher feststellt, beheben wir maschinell, den Rest beurteilt ein Mensch. So genau bekommst du es von uns: sieh dir einen echten Beispielbericht an.
Was das BFSG von deinem Webflow-Shop verlangt
Seit Juni 2025 muss dein Webshop WCAG 2.1 AA erfüllen, ein Webflow-Shop ist keine Ausnahme. Der kostenlose Scan zeigt dir in 60 Sekunden, wo du stehst, mit der genauen Zeile, die nicht erfüllt ist.
Verkaufst du in mehreren Ländern?
WCAG ist der weltweite Standard. Fast jeder Markt baut darauf auf:
Bring deinen Webflow-Shop einmal auf WCAG und du erfüllst die technische Latte in all diesen Märkten. Was sich pro Markt unterscheidet, sind die Aufsichtsbehörde und die Bußgelder.
Sieh dir an, was pro Absatzmarkt gilt →Verwaltest du mehrere Webflow-Seiten für Kunden?
Verhindere, dass die Webshops, die du ablieferst, unter dem EAA zu einem rechtlichen Risiko für deine Auftraggeber werden. Setze Seviranta als deinen automatisierten Qualitätsstempel bei jeder Übergabe und jedem Deploy ein, ein Scan, und jede Seite ist nachweisbar in Ordnung.
Unser Partnerprogramm ansehen →Andere Plattformen
Weiterlesen
Scanne deinen Webflow-Shop kostenlos
Füge deine Webflow-URL in den kostenlosen Scan ein und sieh in einer Minute, welche Zeilen nicht erfüllt sind, mit der genauen Stelle in deinen Komponenten.