Webflow und BFSG: Barrierefreiheit im visuellen Website-Builder

Webflow: Designfreiheit vs. Barrierefreiheit

Webflow ist bei Designern und Agenturen beliebt weil es maximale gestalterische Freiheit bietet – ohne Code schreiben zu müssen. Aber genau diese Freiheit ist auch ein Risiko: Wenn der Designer keine Barrierefreiheit berücksichtigt, ist die Webseite nicht barrierefrei. Anders als bei Templates gibt es keine Leitplanken.

Du kannst in Webflow eine perfekt barrierefreie Seite bauen – oder eine völlig unzugängliche. Es liegt an dir.

Webflows Barrierefreiheits-Features

Webflow hat in den letzten Jahren massiv nachgerüstet: Ein eingebauter Accessibility Audit prüft grundlegende Probleme direkt im Editor. Alt-Texte können für jedes Bild gesetzt werden. ARIA-Attribute sind über die Element-Einstellungen verfügbar.

Die Tab-Reihenfolge kann manuell gesteuert werden. Und Custom Attributes ermöglichen volle Kontrolle über das HTML-Output. Das macht Webflow technisch zu einem der barrierefreiheits-freundlichsten Baukästen.

Typische Fehler in Webflow-Projekten

Designer die Webflow nutzen machen häufig folgende Fehler: Animations und Interaktionen die per Tastatur nicht steuerbar sind. Div-basierte Layouts statt semantischem HTML (Section, Article, Nav). Bild-Text ohne Alt-Text weil der visuelle Fokus dominiert.

Scroll-Animationen die bei reduced-motion-Präferenz nicht deaktiviert werden. Und: Modale Fenster und Popups ohne Fokus-Management.

Best Practices für barrierefreies Webflow-Design

Nutze semantische HTML-Elemente (Section statt Div wo möglich). Setze Alt-Texte konsequent für alle Bilder. Teste jede Interaktion per Tastatur.

Nutze den eingebauten Accessibility Auditor bevor du publishst. Setze ARIA-Labels für interaktive Elemente. Respektiere prefers-reduced-motion für Animationen.

Und prüfe die fertige Seite mit bf-check.de für einen unabhängigen BFSG-Check.

Häufig gestellte Fragen