Barrierefreiheit mit Website-Baukästen

Baukästen nehmen dir das Markup ab – und damit auch die Möglichkeit, es zu reparieren. Was bleibt, ist trotzdem viel: Überschriftenebenen, Alt-Texte, Linktexte, Farbwahl, Formularaufbau und die Entscheidung, welche Widgets du einsetzt. Erfahrungsgemäß liegt dort der größere Teil der Befunde, nicht im Systemkern.

Das Wichtigste in Kürze

• Die Verantwortung liegt beim Anbieter der Dienstleistung, also bei dir – nicht beim Baukasten. Dass ein System bestimmte Fehler nicht abstellen lässt, entlastet nicht.
• Webflow ist ein Sonderfall. Es erzeugt frei bestimmbares HTML; Elementtyp, Überschriftenebene und ARIA-Attribute wählst du selbst. Damit gelten dort dieselben Regeln wie bei handgeschriebenem Code – und dieselbe volle Verantwortung.
• Bei Wix, Squarespace und Jimdo entscheidest du über Inhalt, Struktur und Farbwahl, nicht über das ausgelieferte Markup. Der Hebel liegt in den Redaktionsentscheidungen.
• Die vier Baukasten-typischen Fehlerquellen: Text in Bildern, Überschriften als Schriftgröße, frei positionierte Elemente mit unlogischer Lesereihenfolge und Widgets von Drittanbietern.
• Barrierefreiheits-Assistenten einiger Anbieter prüfen sinnvolle Punkte – fehlende Alt-Texte, Kontraste, Seitentitel. Sie prüfen nicht alles und ersetzen keinen eigenen Test.
• Frei positionierte Layouts sind der größte Unterschied zu klassischen CMS: Was optisch nebeneinander liegt, kann im Quelltext in beliebiger Reihenfolge stehen – und genau diese Reihenfolge liest ein Screenreader (1.3.2).
• Stand August 2026 gibt es keinen Baukasten, der Konformität garantiert. Die Anbieteraussage ist ein Baustein deiner Erklärung, nicht ihr Ersatz.

Kein Rechtsrat. Ob dein Angebot unter das BFSG fällt, klärt der BFSG-Schnelltest und im Zweifel eine juristische Prüfung.

Die Grundfrage: Wer verantwortet was?

Bei Baukästen taucht ein Argument regelmäßig auf, und es trägt nicht: „Das kann ich in Wix gar nicht ändern.“ Rechtlich ist das kein Einwand. Verpflichtet ist, wer die Dienstleistung gegenüber Verbrauchern erbringt; das Werkzeug ist deine Wahl, und die Auswahl gehört zu deinen Pflichten. Praktisch bedeutet das drei Dinge:

1. Prüfe vor der Entscheidung, nicht danach. Eine Testseite mit Formular, Bildern und Menü kostet eine Stunde und beantwortet mehr als jede Produktseite.
2. Nutze aus, was dir gehört. Überschriften, Alt-Texte, Linktexte, Farben und Formularaufbau steuerst du in jedem Baukasten selbst.
3. Dokumentiere, was du nicht ändern kannst. Was am System scheitert, gehört in deine Barrierefreiheitserklärung und in ein Ticket beim Anbieter.

Webflow: volle Freiheit, volle Verantwortung

Webflow ist in dieser Runde die Ausnahme, weil es kein Baukasten mit festen Bausteinen ist, sondern ein visueller Code-Editor. Du bestimmst pro Element den HTML-Tag, setzt Überschriftenebenen bewusst, kannst ARIA-Attribute vergeben und den Fokusstil frei gestalten.

Damit gelten dort exakt die Regeln dieser Website – und die üblichen Fallen:

• Elemente als div belassen, obwohl button, nav oder ul gemeint sind. Der Editor macht es einem leicht, alles als Container zu bauen; siehe „div-soup“ vermeiden.
• Überschriftenebenen nach Optik wählen. Die Größe kommt aus der Klasse, die Ebene aus der Bedeutung (Überschriften-Hierarchie).
• Interaktionen ohne Tastaturpfad. Webflow-Interaktionen reagieren auf Klick und Hover; ohne zusätzliche Arbeit gibt es keinen Tastaturzugang und keinen Zustand für Hilfsmittel.
• Fokusstil vergessen. Wer den Standard-Outline überschreibt, muss einen Ersatz liefern (2.4.7).

Der Umkehrschluss ist die gute Nachricht: In Webflow lässt sich praktisch jeder Befund beheben. Das System ist selten die Grenze.

Wix, Squarespace, Jimdo: was du steuerst

Bei den klassischen Baukästen bekommst du fertige Bausteine. Das ausgelieferte Markup gehört dem Anbieter, deine Entscheidungen darin gehören dir – und die wiegen schwerer, als es zunächst wirkt.

Überschriften. Jeder Editor bietet eine Auswahl zwischen Titel, Untertitel und Absatz. Diese Auswahl erzeugt echte Überschriftenebenen. Wer sie nach Schriftgröße trifft, zerstört die Struktur – auf jeder Seite neu.

Alt-Texte. Jeder der genannten Baukästen hat ein Feld dafür. Es wird selten ausgefüllt. Das ist der billigste große Fortschritt, den eine bestehende Baukasten-Website machen kann.

Farbwahl. Die Farbschemata sind frei einstellbar, und genau dort entstehen Kontrastfehler: helles Grau auf Weiß, Weiß auf Pastellton, Text über einem Bild. Nachmessen mit dem Kontrast-Check, Zielwerte unter Farbkontraste.

Formularfelder. Die Editoren erlauben es, Beschriftungen auszublenden und nur Platzhalter zu zeigen. Das ist bequem und falsch: Ein Platzhalter verschwindet beim Tippen und ersetzt kein Label.

Widgets von Drittanbietern. Buchungssysteme, Chat-Fenster, Kartenanwendungen und Social-Feeds bringen fremdes Markup mit. Sie gehören einzeln geprüft, bevor sie auf der Seite bleiben.

Was dir in welchem System gehört

Die Tabelle erklärt, warum die Reparaturliste in beiden Welten unterschiedlich lang ausfällt – und warum in beiden Welten dieselben vier Zeilen entscheidend sind: Überschriften, Reihenfolge, Alternativtexte, Farben. Das sind die Punkte, die du überall selbst in der Hand hast.

Der Baukasten-Klassiker: frei positionierte Layouts

Der Editor zeigt eine Fläche, auf der Elemente frei platziert werden. Optisch ergibt das ein Layout; im Quelltext ergibt es eine Reihenfolge, die niemand bewusst gewählt hat. Ein Screenreader liest genau diese Reihenfolge, und die Tastatur folgt ihr auch.

Das führt zu zwei Befunden, die in Baukasten-Websites überdurchschnittlich oft auftauchen:

• Die Bildunterschrift steht vor dem Bild, die Preisangabe vor dem Produktnamen, der Absende-Knopf vor dem letzten Feld. Verstoß gegen 1.3.2 Bedeutungstragende Reihenfolge.
• Die mobile Ansicht ordnet anders als die Desktop-Ansicht. Beide sind für sich plausibel, eine davon passt nicht zur Quelltextreihenfolge.

Der Test dafür ist unspektakulär: mit Tab durch die Seite gehen und darauf achten, ob der Fokus springt. Wenn er von oben rechts nach unten links und wieder zurück wandert, stimmt die Reihenfolge nicht.

Barrierefreiheits-Assistenten der Anbieter

Mehrere Baukästen bringen inzwischen einen Prüf-Assistenten mit, der die eigenen Seiten auf typische Punkte durchsieht: fehlende Alt-Texte, fehlende Seitentitel, zu schwache Kontraste, fehlende lang-Angabe. Das ist sinnvoll und erspart Arbeit.

Was es nicht ist: ein Konformitätsnachweis. Solche Assistenten prüfen dieselbe Teilmenge wie andere automatische Werkzeuge – nach gängigen Erhebungen rund ein Drittel der Erfolgskriterien. Ob eine Bedienung sinnvoll ist, ob ein Alt-Text die richtige Information trägt, ob die Reihenfolge stimmt, entscheidet weiterhin ein Mensch. Der Vergleich der Werkzeuge steht unter Prüfwerkzeuge im Vergleich.

Und noch deutlicher: Ein Overlay-Widget – das eingeblendete Menü mit Schriftgröße, Kontrast und Vorlesefunktion – ist etwas anderes als ein Prüf-Assistent. Es behebt nichts und gilt nicht als Nachweis.

So prüfst du deine Baukasten-Website

1. Tastatur-Durchlauf über Startseite, eine Inhaltsseite und das Kontaktformular. Achte besonders auf Sprünge in der Fokusreihenfolge.
2. Überschriftenstruktur ansehen – mit HeadingsMap oder dem Firefox-Accessibility-Inspector. Genau eine h1, keine Sprünge.
3. Bilder durchgehen: Hat jedes inhaltstragende Bild einen Alt-Text? Sind Deko-Bilder leer ausgezeichnet?
4. Kontraste messen, vor allem Text auf Aktionsfarbe und Text über Bildern.
5. Auf 400 % zoomen und prüfen, ob die Seite umbricht (Reflow). Frei positionierte Layouts fallen hier häufig auf.
6. Formular unvollständig absenden. Kommt die Fehlermeldung im Klartext und am Feld an?
7. Jedes Drittanbieter-Widget einzeln bedienen – nur mit der Tastatur.

Was du dabei findest und nicht selbst beheben kannst, notierst du für die Erklärung. Der komplette Ablauf steht unter Barrierefreiheit selbst testen.

Häufiger Fehler in der Praxis

Die Vorlage entschied, nicht die Struktur. Baukasten-Vorlagen sind nach Branche sortiert, nicht nach Qualität des Markups. Zwei Vorlagen desselben Anbieters können sich in Kontrast und Überschriftenlogik deutlich unterscheiden – der Vergleich lohnt sich vor dem Start.

Alles auf eine Seite gepackt. Lange Onepager mit zehn Abschnitten wirken modern und machen die Sprungnavigation schwer, wenn Überschriftenebenen fehlen. Eine sinnvolle Gliederung ersetzt hier den Skip-Link, den man nicht selbst einbauen kann.

Text als Bild eingebaut. Der Editor macht es leicht, ein Angebot als Grafik hochzuladen. Das ist für Screenreader leer, beim Zoomen unscharf und verstößt gegen 1.4.5.

Auf den Anbieter verwiesen und nichts dokumentiert. Wenn ein Punkt systembedingt nicht lösbar ist, ist das keine Schande – aber es gehört benannt. Eine Erklärung, die Probleme verschweigt, ist selbst ein Mangel.

Häufige Fragen

Kann ich mit einem Baukasten überhaupt BFSG-konform werden?

In vielen Fällen ja – vor allem bei kleineren Informationsseiten und Kontaktformularen. Entscheidend ist, dass du die eigenen Hebel nutzt und den Baukasten vor der Entscheidung testest. Bei komplexeren Angeboten mit Buchung, Konto oder Shop wird es enger, weil mehr fremde Bausteine im Spiel sind.

Welcher Baukasten ist der barrierefreiste?

Diese Frage lässt sich nicht pauschal beantworten, weil sich die Systeme laufend ändern und weil innerhalb eines Systems die Vorlage viel ausmacht. Belastbar ist nur der eigene Test: eine Beispielseite mit Menü, Bild, Tabelle und Formular anlegen und die sieben Schritte oben durchgehen. Webflow gibt dir konstruktionsbedingt die meiste Kontrolle – dafür auch die meiste Arbeit.

Mein Baukasten wirbt mit „WCAG-konform“ – reicht das?

Nein. Die Aussage kann sich nur auf die mitgelieferten Bausteine beziehen, nicht auf deine Seite mit deinen Inhalten, Farben und Widgets. Nimm die Aussage als Baustein für deine Erklärung und prüfe trotzdem selbst.

Was mache ich, wenn der Baukasten einen Fehler nicht beheben lässt?

Drei Schritte: den Fehler beim Anbieter melden (das wirkt, wenn viele es tun), eine Ausweichlösung anbieten – etwa ein erreichbares Kontaktformular neben einem unbedienbaren Buchungs-Widget –, und den Punkt in der Erklärung zur Barrierefreiheit benennen.

Hilft ein Barrierefreiheits-Widget aus dem Baukasten-Store?

Für die Rechtslage nicht. Prüf-Assistenten, die Befunde melden, sind nützlich; Overlay-Widgets, die eine zweite Bedienoberfläche einblenden, ändern die Ursachen nicht und ersetzen keine Umsetzung.

Verwandte Themen

• Barrierefreiheit nach Plattform – die Übersicht über alle Systeme
• Barrierefreiheit mit WordPress – der Wechselkandidat, wenn der Baukasten zu eng wird
• Prüfwerkzeuge im Vergleich – was die Assistenten finden und was nicht
• Farbkontraste richtig einstellen – der Hebel, den jeder Baukasten hergibt
• Barrierefreiheitserklärung erstellen – wie du systembedingte Grenzen sauber benennst

Quellen

• Barrierefreiheitsstärkungsgesetz (BFSG) (Gesetzestext – Pflichten des Dienstleistungserbringers)
• Understanding SC 1.3.2 Meaningful Sequence (W3C – warum die Quelltextreihenfolge zählt)
• Interim Repairs to Inaccessible Content (W3C WAI – Umgang mit Barrieren, die man nicht selbst beheben kann)