Eine Squarespace-Website ist nicht wegen der Plattform barrierefrei oder nicht barrierefrei. Squarespace erzeugt das Markup jedes Blocks; Sie wählen Layout, Farben, Texte, Bilder und eigenen Code. Squarespace sagt es selbst: Weil Nutzer viel gestalterische Freiheit haben, können sie auch Websites bauen, die nicht barrierefrei sind – und für die Einhaltung der Vorgaben sind die Betreiber verantwortlich [5]. Diese Seite trennt, was die Plattform leistet, von dem, was bei Ihnen bleibt.
Gilt das BFSG für Ihre Squarespace-Website oder Ihren Shop?
Wenn Sie mit Squarespace Commerce an Verbraucherinnen und Verbraucher verkaufen, erbringen Sie eine „Dienstleistung im elektronischen Geschäftsverkehr“ (§ 1 Abs. 3 Nr. 5 BFSG), für die das BFSG seit dem 28. Juni 2025 gilt [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 unter Ausnahme für Kleinstunternehmen. Ein Shop, der nur an Gewerbekunden verkauft, erbringt keine Dienstleistung für Verbraucher.
Viele Squarespace-Seiten sind Portfolios oder Unternehmensauftritte. Das BFSG erfasst bestimmte Dienstleistungen – Onlinehandel, Bankdienstleistungen, Telekommunikation, E-Books, Personenbeförderung. Eine reine Informationsseite eines privaten Unternehmens gehört in der Regel nicht dazu; eine Buchungs- oder Bestellfunktion darauf kann es sein. Öffentliche Stellen fallen unter die BITV 2.0. Mehr in BFSG für Onlineshops und im Leitfaden zu BFSG und EAA.
Was Squarespace mitbringt – und was nicht
Squarespace ist gehostet: Sie bearbeiten im Browser, Squarespace rendert die Seite, und auf Version 7.1 ist Fluid Engine der Standard-Editor für Block-Abschnitte [6].
Sie bekommen:
- Skip-Link und Fokusrahmen. Mit Tab erscheint ein „Skip to Content“-Link, und ein sichtbarer Rahmen markiert per Tastatur erreichte Links und Felder [3].
- Beschriftete Checkout-Felder. Nach Angaben von Squarespace haben die Checkout-Felder klare Textbeschriftungen, und die Schaltflächen sind im gesamten Checkout deutlich unterscheidbar [3].
- Farbsteuerung und Alt-Text-Felder. Im Farben-Panel kombinieren Sie Hintergrund und Schrift so, dass der WCAG-Kontrast ohne eigenes CSS erreicht wird; Bilder haben ein Feld für Alternativtext [3].
- Ein VPAT. Squarespace verweist auf ein Voluntary Product Accessibility Template, das beschreibt, wie die Seitenstruktur der Plattform den Richtlinien folgt [10].
Sie bekommen nicht:
- Kontrolle über das Block-Markup. Sie wählen Blöcke und Einstellungen; was ein Block ausgibt, bestimmt Squarespace. Farbe und Stärke des Fokusrahmens lassen sich nicht anpassen [4].
- Code im Checkout. Code-Injection gibt es ab den Tarifen Core, Plus und Advanced, und Checkout-Seiten unterstützen überhaupt keinen Code [9]. Ein Fehler dort muss Squarespace beheben.
- Support für eigenen Code. Der Squarespace-Support hilft weder beim Einbau eigenen Codes noch bei Problemen, die er verursacht [9].
- Rechtsberatung oder eine Garantie. Squarespace betont, dass seine Hinweise keine Rechtsberatung sind und Sie für die Anforderungen an Ihr Unternehmen verantwortlich sind [3].
Was wir auf Squarespace-Seiten finden
Fluid-Engine-Layouts in falscher Reihenfolge
Fluid Engine platziert Blöcke frei in einem Raster, und das mobile Layout lässt sich unabhängig vom Desktop anordnen [6][7]. Blöcke dürfen sich überlappen; Squarespace rät selbst, sie sichtbar und nutzbar zu halten [4]. Ob ein umgestelltes mobiles Layout auch die Reihenfolge für Tastatur und Screenreader ändert, sagt die Dokumentation nicht – testen Sie es: In einem schmalen Fenster durch die Seite tabben und die Reihenfolge mit dem vergleichen, was Sie sehen.
Farben, die den Fokusrahmen verschlucken
Weil sich der Fokusrahmen nicht gestalten lässt [4], hängt seine Sichtbarkeit von Ihren Farben ab. Auf manchen Farbthemen einzelner Abschnitte oder bei Text über einem Bild verschwinden Rahmen und Text gleichermaßen. Prüfen Sie jedes Farbthema, das Sie verwenden, nicht nur das Hauptthema.
Überschriften nach Schriftgröße gewählt
Squarespace empfiehlt eine Überschrift 1 pro Seite und keine übersprungenen Ebenen [4]. In der Praxis werden Überschriften nach Größe gewählt: mehrere H1 auf einer Seite, oder ein Abschnittstitel als großer Absatz, der in der Überschriftenliste eines Screenreaders nie auftaucht.
Cookie-Banner, Code-Blöcke und Einbettungen
Consent-Tools, Buchungs- und Newsletter-Widgets, Karten und Videos kommen als Code-Block, Einbettung oder Code-Injection. Jedes bringt eigenes Markup mit, oft ein Iframe ohne Titel oder einen Dialog, der den Fokus nicht übernimmt. Squarespace unterstützt diesen Code nicht [9] – seine Barrierefreiheit prüfen Sie selbst.
Produktseiten, Varianten und das Warenkorb-Symbol
Variantenauswahl, Produktgalerien mit Zoom und „In den Warenkorb“ sind die Stellen, an denen Commerce-Seiten geprüft werden. Squarespace rät zu Alt-Texten, die Farbe und Details nennen, und zu Größentabellen als Text, weil Screenreader eine Tabelle im Bild nicht lesen können [8]. Außerdem lässt sich die Größe des Warenkorb-Symbols nicht ändern – ergänzen Sie Rahmen und Kontrast, oder nutzen Sie den Express-Checkout, der den Warenkorb überspringt [8]. Automatisch laufende Galerie-Slideshows brauchen eine Pause-Funktion.
Formulare und Checkout
Formularblöcke brauchen sichtbare Beschriftungen; Squarespace sagt selbst, dass Platzhaltertext eine Beschriftung ergänzen, nicht ersetzen soll [4]. Der Checkout ist die Seite von Squarespace, ohne eigenen Code [9]: Sie testen ihn mit der Tastatur bis zur Zahlung, melden Fehler an Squarespace und nennen sie bis zur Behebung als bekannte Einschränkung.
Wo Sie zuerst prüfen sollten
| Kriterium | Warum bei Squarespace | Automatisierbar |
|---|---|---|
| 1.3.2 Bedeutungsvolle Reihenfolge (A) | Fluid-Engine-Raster, eigenes mobiles Layout | Nur manuell |
| 2.4.3 Fokus-Reihenfolge (A) | Überlappende Blöcke, mobiles Menü, Warenkorb | Teilweise automatisiert |
| 2.4.7 Fokus sichtbar (AA) | Fester Fokusrahmen auf dunklen Themen | Teilweise automatisiert |
| 1.4.3 Kontrast (Minimum) (AA) | Farbthemen der Abschnitte, Text auf Bildern | Automatisiert |
| 1.3.1 Info und Beziehungen (A) | Überschriften nach Größe gewählt | Teilweise automatisiert |
| 1.1.1 Nicht-Text-Inhalt (A) | Produktbilder, Größentabellen als Bild | Teilweise automatisiert |
| 4.1.2 Name, Rolle, Wert (A) | Code-Blöcke, Einbettungen, Variantenauswahl | Teilweise automatisiert |
| 2.5.8 Zielgröße (Minimum) (AA) | Warenkorb-Symbol, Social-Icons | Teilweise automatisiert |
| 2.2.2 Pausieren, stoppen, ausblenden (A) | Galerie-Slideshows, Video-Hintergründe | Teilweise automatisiert |
| 3.3.2 Beschriftungen oder Anweisungen (A) | Formularblöcke nur mit Platzhalter | Teilweise automatisiert |
„Automatisiert“: Eine Regel entscheidet das Kriterium allein. „Teilweise automatisiert“: Eine Regel findet einen Teil der Fehler, den Rest beurteilt ein Mensch. Alle Kriterien: WCAG 2.2 AA, Kriterium für Kriterium.
Eine sinnvolle Reihenfolge
- Version klären. Fluid Engine gibt es nur auf 7.1-Seiten [6]; auf 7.0 funktionieren die Layout-Werkzeuge anders. Prüfen Sie die Website, die Sie tatsächlich betreiben.
- Farben in den Website-Stilen korrigieren. Kontrast einmal im Farben-Panel festlegen, dann prüfen, ob der Fokusrahmen auf jedem verwendeten Abschnittsthema sichtbar ist [3][4].
- Reihenfolge auf Desktop und mobil prüfen. Unnötige Überlappungen entfernen und jede Seitenvorlage in Smartphone-Breite mit Tab durchgehen [7].
- Alt-Texte an der Quelle pflegen. In Bildblöcken und bei jedem Produktbild, mit Farbe und Details; Größentabellen als Text statt als Bild [8].
- Code inventarisieren. Jeden Code-Block, jede Einbettung und jedes injizierte Skript auflisten, auch das Cookie-Banner. Jeweils mit der Tastatur testen, dann behalten, ersetzen oder dokumentieren.
- Den Kauf von Hand durchgehen. Produkt → Variante → Warenkorb → Checkout → Zahlung im Testmodus. Was im Squarespace-Checkout scheitert, geht an den Squarespace-Support und in Ihre Barrierefreiheitsinformationen.
Was Reviseberg auf Squarespace-Seiten prüft – und was Sie selbst testen
Reviseberg crawlt Ihre veröffentlichte Website einschließlich der Shop-Seiten 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, wo das mobile Fluid-Engine-Layout greift. 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 einem Block, den Sie überall nutzen, ist deshalb ein Issue und nicht Hunderte. Liegt die Ursache in Markup, das nur Squarespace ändern kann, markieren Sie das Issue mit Begründung als „nicht behebbar“ – es bleibt dokumentiert.
Der Tastatur-Agent öffnet die Seiten einer Journey, die Sie festlegen – etwa eine Kategorie- und eine Produktseite –, 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. Formulare füllt er nicht aus, und er bestellt nicht. Den Checkout hinter einem gefüllten Warenkorb 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 sinnvoll beschreiben, ob Fehlermeldungen verständlich sind 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. Wir installieren nichts auf Ihrer Website und setzen kein Overlay-Skript ein.
Geschrieben, um nützlich zu sein, nicht als Rechtsberatung. Stand: 27. September 2026.